Vue实例构造-1

data

• Vue 实例的数据对象,Vue会将这些数据对象的属性转换为getter/setter,从而实现数据响应式绑定.
• 数据绑定原理:在属性被访问和修改时通知变化,当属性对象重新被赋值时,会调用相应的setter方法,这时监听器$watcher会通知响应的组件更新
  也正是因为对象属性(Object.defineProperty) 是仅 ES5 支持,故IE
  8以及更低版本不支持Vue

注意:由于在Vue对象创建的时候进行对象的getter/setter
创建以及属性监听注册,故需要在new Vue的时候声明添加全部的数据对象,而不能在其他地方进行动态添加,那样是非响应的

• 异步更新队列
  有时候我们会遇到某种情况:在获取网络数据并完成绑定之后,会采取其他的一系列操作这时候会用到$nextTick函数链接

  updateMessage: function () {
  console.log(this.$el.textContent) // => '没有更新'
  this.$nextTick(function () {
     console.log(this.$el.textContent) // => '更新完成'
  })
  

computed

• 计算属性，可以理解为将data的对象自定义去实现setter/getter方法进行数据绑定

计算属性中的缓存：计算属性中return返回的结果如果依赖于其他数据对象：
computed: {
// a computed getter
reversedMessage: function () {
// this points to the vm instance
return this.message.split('').reverse().join('')
}
}

vue会将reversedMessage的结果缓存，如果所依赖的message对象没有改变，再次访问reversedMessage对象时，避免重复多次计算；同时，当message改变时，reversedMessage会响应的改变值

el

• 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
• 在实例挂载之后， 元素可以用 vm.$el 访问。
• 如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

生命周期

Paste_Image.png

befoeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

此时：Vue实例刚刚创建完成，el 和 data 以及事件 并未初始化（undefined）

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

此时：data，事件初始化完成，el未初始化

beforeMount

此时：挂载之前的状态，el初始化完成，但是并未将组件数据等内容挂载到el上

mounted

此时：完成挂载，将data数据等填充至相应的{{data}}中

所以可以在此mounted进行页面网络数据的获取
以上4个状态，日志数据如下图：

Paste_Image.png

beforUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

当执行类似于：app.message= 'yes !! I do';

data数据更新完之后，先调用此方法，然后再去改变UI试图

update

试图更新完之后，回调这个方法

以上两个生命周期状态如下图：

Paste_Image.png

beforeDestory

实例销毁之前调用。在这一步，实例仍然完全可用。

Destory

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。