Vue基础知识总结

vue.js是一套构建用户界面的渐进式框架，与其他框架不同的是，vue采用的是自底向上增量开发的设计

this

在使用vue开发的过程中，this的指向让我吃了不少亏。所有的生命周期钩子自动绑定this上下文到实例中，因此可以通过this访问数据，对属性和方法进行运算操作。
不能使用箭头函数来定义一个生命周期方法，因为箭头函数绑定了上下文，因此this的指向和你期待的vue实例不一样。
遇到过的坑，使用setTimeout的时候，function里面使用this指向的是window，而不是vue实例。解决的话，可以直接使用vue实例，也可以在一开始用一变量指向this

var _self = this;

实例生命周期

• created这个钩子在实例创建之后被调用
• mounted el被新创建的vm.$el替换，并被挂载到实例上去之后调用该钩子。该钩子在服务器端渲染期间不被调用
• updated
  -destroyed

vue生命周期示意图

模板语法

相关概念：在底层的实现上，vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用状态发生改变的时候，vue能够以最小的代价将改变渲染进DOM操作中

列表渲染

注意：由于js的限制，vue不能检测以下变动的数组

• 当你直接使用索引设置一项内容的时候

vm.items[indexOfItem] = newValue

• 当你修改数组的长度的时候

vm.items.length = newLength

解决第一点：
两种方法：
1.Vue.set

//Vue.set
Vue.set(example.items,indexOfItem,newvalue)

2.数组的splice方法

example.items.splice(indexOfItems,1,newValue)

解决第二个：
使用数组的splice方法

example.items.splice(newLength)

事件处理器

有时候我们需要在内联语句中访问原生DOM事件。可以使用特殊变量$event把它传进方法

Submit

methods:{
      warn:function(message,event){
          //现在我们可以访问原生事件对象
          if(event)event.preventDefault()
              alert(message)
  }
}

深入响应式原理

• vue不允许在已经创建的实例上动态的添加新的根级响应式属性，然而它可以使用Vue.set(object,key,value)方法将响应属性添加到嵌套的对象上：

Vue.set(vm.someobject,'b',2)

也可以使用vm.$set实例方法 ，这也是Vue.set方法的别名：

this.$set(this.someobject,'b',2)

Vue.nextTick(callback)

原因：vue异步执行DOM更新
为了在数据变化之后等待Vue完成更新dom,可以在数据变化之后立即使用Vue。nextTick(callback).这样回调函数在dom更新完成之后就会调用。

{{message}}

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
})