非web开发，遇到自己懵逼的就更新一下
1 cannot find element: #app
image.png
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="./index.js"></script>
<div id="app">
{{ message }}
</div>
百度了下，一脸懵逼。
大体意思就是创建实例的js文件需要放在最下面。而我放在在上面引入vue实例
改为
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="./index.js"></script>
看文档声明周期
部分生命周期图
我们在初始化vue实例时候，先要判断
el属性（true） ->template(false)->compile el html(报错 因为这时候html还没有加载，所以找不到id为app的标签，所以报这个错)
2计算属性的缓存
眼瞎
没有看到重点 计算属性是基于它们的依赖进行缓存的
3 vue的响应式原理
文档上说vue大体是参考了MVVM的模式
vue实例就是vm
vm 如果做到绑定数据到视图，做到实时刷新的呢。
翻了一些资料，看了些源码。貌似应该是
利用Object.defineProperty
小demo
<h1>{{message}}</h1>
var obj = {}
var text = ''
var h1 = document.getElementsByTagName('h1')[0]
Object.defineProperty(obj, 'text', {
get: function() {
return text
},
set: function(newValue) {
text = newValue
h1.innerHTML = text
}
})
在控制台修改data.message即可即使刷新。
当然vue中实现更加复杂
源码
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
var value = getter ? getter.call(obj) : val;
if (Dep.target) {
dep.depend();
if (childOb) {
childOb.dep.depend();
if (Array.isArray(value)) {
dependArray(value);
}
}
}
return value
},
set: function reactiveSetter (newVal) {
var value = getter ? getter.call(obj) : val;
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if ("development" !== 'production' && customSetter) {
customSetter();
}
if (setter) {
setter.call(obj, newVal);
} else {
val = newVal;
}
childOb = !shallow && observe(newVal);
dep.notify();
}
});
前面都要理解
就是这个dep.notify(); 处理的东西有些复杂，因为vue还有指令。双向绑定。所以这里处理的东西很多。大体就是在另外的线程中通知属性的water及时刷新view
(这里具体源码看的有点懵逼，等我有时间请教我们web。再补上)
image.png
4 vue开发chrome app
json文件
{
"manifest_version": 2,
"name": "Learning Vue.js",
"version": "1.0",
"minimum_chrome_version": "23",
"icons": {
"16": "logo.png",
"128": "logo.png"
},
"app": {
"background": {
"scripts": ["main.js"]
}
}
}
main.js
chrome.app.runtime.onLaunched.addListener(function() {
// Center the window on the screen.
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 500;
var height = 300;
chrome.app.window.create("index.html", {
id: "learningVueID",
outerBounds: {
width: width,
height: height,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
}
});
});
vue
var data = {
message: "Learning Vue.js"
};
new Vue({
el: "#app",
data: data
});
image.png
