vue的响应式是，当数据更新，会重新渲染
如下

  1.     <section id="app">
  2.         {{ msg }}
  3.     </section>
  4.     <script>
  5.         const vm = new Vue({
  6.             el:'#app',
  7.             data:{
  8.                 msg:'second-add',
  9.                 zxt:{
  10.                     name:'zxt',
  11.                     age:'120',
  12.                     sex:'nan',
  13.                     love:"sleep",
  14.                 }
  15.             }
  16.         }) 
  17.         vm.msg = 'first-add';
  18.     </script>

这样就能重新渲染dom上的数据
如何按照以前的逻辑，那就要封装一个函数来更新dom上的数据。
当创建vue实例时，vue会将data中的成员代理给vue实例，目的是为了实现响应式，监控数据变化，执行某个监听函数

  • 更改的数据必须是存在的数据，否则不能重新渲染页面，因为他监听不到

    1.   <section id="app">
    2.         <!-- 即使更改了数据，也不会重新渲染页面 -->
    3.       {{ zxt.son }} 
    4.   </section>
    5.   <script>
    6.       const vm = new Vue({
    7.           el:'#app',
    8.           data:{
    9.               msg:'second-add',
    10.               zxt:{
    11.                   name:'zxt',
    12.                   age:'120',
    13.                   sex:'nan',
    14.                   love:"sleep",
    15.               }
    16.           }
    17.       }) 
    18.       vm.zxt.son = 'first-add';
    19.   </script>

  • 更改的数据必须已渲染过的数据，否则从性能角度考虑，不会重新渲染页面

    1.   <section id="app">
    2.       <!-- 即使更改了数据，也不会重新渲染页面 -->
    3.       {{ msg }}
    4.   </section>
    5.   <script>
    6.       const vm = new Vue({
    7.           el:'#app',
    8.           data:{
    9.               msg:'second-add',
    10.               zxt:{
    11.                   name:'zxt',
    12.                   age:'120',
    13.                   sex:'nan',
    14.                   love:"sleep",
    15.               }
    16.           }
    17.       }) 
    18.       vm.zxt.sex = 'nv';
    19.   </script>

  • 更改数据后，页面会立刻重新渲染吗？

vue更新DOM的操作是异步执行的，只要侦听到数据变化，将开启一个异步队列，如果一个数据被多次变更，那么只会被推入到队列中一次，这样可以避免不必要的计算和DOM操作。

  1.     <section id="app">
  2.         {{ msg }}
  3.     </section>
  4.     <script>
  5.         const vm = new Vue({
  6.             el:'#app',
  7.             data:{
  8.                 msg:'second-add',
  9.                 zxt:{
  10.                     name:'zxt',
  11.                     age:'120',
  12.                     sex:'nan',
  13.                     love:"sleep",
  14.                 }
  15.             }
  16.         }) 
  17.         vm.msg = 'nv';
  18.         console.log(vm.msg) // 此时数据已经更改
  19.         console.log(vm.$el.innerText) // 此时页面还没重新渲染
  20.     </script>

vm.$el

值为被Vue控制的元素（或者说，Vue挂载的元素）

vm.$nextTick & Vue.nextTick

在页面重新渲染，DOM更新后，会立刻执行vm.$nextTick或Vue.nextTick
这两个的区别是

  • vm.$nextTick 的this 指向实例对象
  • Vue.nextTick 的this指向window

vm.nextTick和Vue.nextTick还可以作为Promise使用

  1.         vm.$nextTick(()=>{
  2.             console.log(vm.$el.innerText + '$$$$$$$$$$$$$$$$$$');
  3.         })
  4.         Vue.nextTick(()=>{
  5.             console.log(vm.$el.innerText + 'VVVVVVVVVVVVVVVVVVVVV');
  6.         })
  7.         vm.$nextTick().then(()=>{
  8.             console.log(vm.$el.innerText + '$$$$$$$$$$$$')
  9.         })

nextTick是怎么实现的
在nextTick的实现源码中，会先判断是否支持微任务，不支持后，才会执行宏任务

  1.   if(typeof Promise !== 'undefined') {
  2.     // 微任务
  3.     // 首先看一下浏览器中有没有promise
  4.     // 因为IE浏览器中不能执行Promise
  5.     const p = Promise.resolve();
  7.   } else if(typeof MutationObserver !== 'undefined') {
  8.     // 微任务
  9.     // 突变观察
  10.     // 监听文档中文字的变化，如果文字有变化，就会执行回调
  11.     // vue的具体做法是：创建一个假节点，然后让这个假节点稍微改动一下，就会执行对应的函数
  12.   } else if(typeof setImmediate !== 'undefined') {
  13.     // 宏任务
  14.     // 只在IE下有
  15.   } else {
  16.     // 宏任务
  17.     // 如果上面都不能执行，那么则会调用setTimeout
  18.   }

曾经vue用过的宏任务

  • MessageChannel 消息通道 宏任务

vue的实例中都有啥

image.png
你会发现他里面的属性前面不是加 $ 就是 _
前面加 $ 的是我们可以使用的属性
见面加 _ 的是Vue自己内部使用的属性