[JavaScript知识库]Vue的数据代理，监听属性

1. 数据代理

通过一个对象代理另一个对象中的属性的操作（读 / 写 ）

例如

  <script>
      let son = {x: 100}
      let son1 = {y: 200}
      Object.defineProperty(son1,'x',{
        get(){
          return son.x
        },
        set(value){
          son.x = value
        }
      })
  </script>

vue 数据代理： 通过vm对象来代理data中所有属性的操作，更方便操作data中的数据

  <div id="app">
    <h2>{{name}}</h2>
    <h2>{{address}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
    el:'#app',
    // data
    data: {
      name: '尚硅谷',
      address:'北京'
    }
  })

通过vm对象来对data进行代理，而当data数据更新时，view视图模版会重新加载

监听属性

watch：当监听属性变化时，回调函数自动调动，进行相关操作

监视的属性必须存在，才能进行监视

监视的两种写法：

????????????????1.new? Vue时传入watch配置

? ? ? ? ? ? ? ? 2.通过vm.$watch（“”，{}）监视

深度监视：

? ? ? ? 1.Vue中的watch默认不监测对象内部值的改变（一层）

? ? ? ? ? ? ?配制deep：true可以监测对象内部值改变（多层）再在handler里面监测

备注：Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

? ? ? ? ? ? 使用watch时根据数值的具体结构，决定是否采用深度监视

watch跟computed的区别

1.computed的特性是计算，通过return返回的结果，具有缓存性

2.watch的特性是监听，通过手动修改来监听，但watch可以进行异步操作，不具有缓存性

两个重要的小原则：

? ? ? ? 1.所有被vue管理的函数，最好写成普通函数，这样this指向才是vm 或 组件实例化对象。

? ? ? ? 所有不被Vue所管理的函数（定时器的回调函数，异步任务），最好写成箭头函数

，这样this的指向才是vm 或 组件实例对象