vue

vue.js

Vue.js 是一个用来开发 web 界面的前端库。

• 响应式编程

  受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。可以创建一个新的对象，让它包含原对象的属性和新的属性。

  // 代替 
  Object.assign(this.someObject, { a: 1, b: 2 })
  
  this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

• 运行过程

  • 编译器将字符串模板（template）编译为渲染函数（render），称之为编译过程

  • 运行时实际调用编译的渲染函数，称之为运行过程。

  数据更改 -> setter -> Dep -> Watcher -> nextTick -> patch -> 更新视图

  

• 双向绑定

  value的单向绑定（数据劫持 + 发布订阅） + onChange 事件侦听。当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，在数据变动时发布消息给订阅者，触发相应的监听回调。

  Vue 异步执行 DOM 更新，只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。

  var vm = new Vue({
    el: '#example',
    data: {
      message: '123'
    }
  });
  vm.message = 'new message'; // 更改数据
  vm.$el.textContent === 'new message';   // false
  Vue.nextTick(function () {
    vm.$el.textContent === 'new message';  // true
  });

• 生命周期

  总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后

  beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

  创建 -> 挂载 -> 更新 -> 销毁

  

• 常用指令

  • v-modal 实现双向绑定

  • v-bind 属性绑定

  • v-for 数据遍历

  • v-if 属性判断，是否隐藏