非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