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基础知识总结_第1张图片
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把它传进方法


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

你可能感兴趣的:(Vue基础知识总结)