你了解vue对数组和对象干了什么吗？vue通过操作对象属性值的变更，页面会刷新，重新渲染。给对象新增属性的方式，页面不会

数组

通过索引的方式去改变数组，不能实现数据的渲染更新

数组通过push， shift unshift 可以修改数组后并渲染

因为vue改写了数组的原生的方法，所以数组操作的不在是原来的方法，而是数据***变异***🧬后的方法

Push Pop Shift Unshift Sort Reverse Splice 这些方法变异过

对象

vue通过操作对象属性值的变更，页面会刷新，重新渲染。给对象新增属性的方式，页面不会渲染，又或者给对象属性操作赋值的时候，给的值和原来的一样，这样vue也是不更新的。

如果直接给vue的obj赋值一个新的对象比如
vm.obj = {...obj,xxx:100};
这样虽然可以达到新增属性立即渲染的目的，但是这样做性能不好， obj是引用值，不断的断开和新建资源链接，如果属性非常多的话，肯定是一笔不小的开支。

我们可以通过vue的$set 去给对象新增属性达到更新的目的

vm.$set(vm.obj,'xxx',90);

xxx是给obj新增的属性，vm.$set不仅可以更改对象，还可以更改数组，字符串等

vm.$set(vm.arr,1,100);

$el

vue的挂载点，

console.log(vm.$el)

可以打印出挂载的dom节点，

<div id="app">
  {{name}}
    </div>
<script>
      const vm = new Vue({
        el: '#app',
        data: {
          name: 'vue',
        }
      });
vm.name = 'vue1';
vm.name = 'vue2';
vm.name = 'vue3';
console.log(vm.$el.innerText);
</script>

上图页面上显示的vue3，控制台显示的是vue，因为前面的三个对name的赋值，会存放到赋值队列，是异步执行，而控制台打印是同步的。vue不会赋值一次刷新一次dom，而是等用对相同元素赋值队列中最后一个值来赋值，从而减少不必要的dom操作。

$nextTick

如果我们想在控制台打印渲染后的dom，可以通过$nextTick！

vm.$nextTick(() => {
    console.log(vm.$el.innerText);
})

$mount挂载

$mount 和el一样都是实现挂载dom

$mount('#app')

🚬每天分享一点点，欢迎大家讨论，共同学习，有不对的地方，欢迎指出🚬