vue 从入门到精通之【数据操作(data,methods,computed,watch)+filter】(二)

Vue.prototype

vm.$watch 设置监听器，和直接在配置项中写的 watch 类似

vm.$set 设置响应式数据的值

vm.$delete 删除某个响应式数据

vm.$destroy 销毁这个组件/实例 会触发 beforeDestory 和 destroyed 周期函数

vm.$forceUpdate 强制通知组件更新「一般响应式数据更改后，组件会更新；但是非响应式数据更新后，我们也想让组件更新，可以基于这个办法」

vm.$mount 把编译后的内容挂载到某个容器中

vm.$nextTick 响应式数据更新，视图重新渲染，等到虚拟DOM已经变为真实DOM后触发这个函数

vm .emit/on/$off 发布订阅，实现父子组件通信

vm.$once 监听一个事件「只触发一次，原理是在第一次触发完，就移除了事件绑定」

Vue组件

创建 xxx.vue 就是创建一个vue组件，每一个vue组件都是 VueComponent 这个类的实例「而VueComponent是Vue的子类」 在组件的周期函数或者方法中，基于this就可以获取这个组件的实例

私有属性：和Vue实例具备相同的私有属性和特点

data设置的值是响应式数据，会挂载到实例上

methods设置的方法也会挂载到实例上，不是响应式数据

props接收的属性也会挂载到实例上，不是响应式数据

computed计算属性也会挂载到实例上，不是响应式数据

filters设置的函数，并没有挂载到实例上，而是在模板编译的时候，直接把函数执行，把返回结果渲染编译了

小技巧：

实例.proto -> VueComponent.prototype -> Vue.prototype

所以只要我们在Vue.prototype设置一些东西，这样所有组件最后都可以基于“this.xxx”获取到设置的东西，例如：

Vue.prototype.$api = {};
this.$api.xxx

data

基于data构建的数据，会自动挂载到vue的实例上「vm.xxx去访问这些数据」；而且这些数据是被劫持监听的「可以看到get/set」，这样的数据我们称之为“响应式数据”:响应式数据更新，视图会自动重新渲染！！

• 默认情况下，初始化vue的实例，会把data中的数据进行深度遍历和劫持...

• 对于数组数据来讲

  • 数组本身会被get/set vm.arr=xxx会通知视图渲染

  • 数组中的索引不会get/set，所以 vm.arr[0]=xxx不会通知视图渲染

  • vue重写了7个数组的方法 pop / push / shift / unshift / reverse / sort / splice ，操作这7个方法，在改变数组内容的同时，也会通知视图重新渲染；操作其它方法，不会通知视图渲染...

Object.defineProperty() 双向数据绑定的原理（vue2）

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性 Object.defineProperty(obj, prop, desc)

1. obj 需要定义属性的当前对象

2. prop 当前需要定义的属性名

3. desc 属性描述符 一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。

   • writable:是否可以修改

   • enumerable:描述属性是否会出现在for in 或者 Object.keys()的遍历中(是否可枚举）在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。内置的属性是不可枚举的，所以不能被for…in访问到

   • configurable:描述属性是否配置，以及可否删除

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，