这一章主要是列举vue实例一些实用的方法和属性，大概讲解一下用到的地方，有些涉及组件部分的属性，暂时跳过，待到学完组件章节，再回过头来补充。

主要讲解：

1. vue instance声明方式
2. vue instance上的属性
3. vue instance上的方法

vue instance声明方式

const vm = new Vue({
     el:"#app",                         //挂载的节点，一般都是通过id
     template:`<div>{{text}}</div>`,    //模板
     data:{                             //数据
         text:0
     }
 })

vue instance 上的属性

1. vm.$data
   vm.$data就是当前instance(vm)中data属性。可以通过修改vm.$data.text = 1修改上例中text的值。
2. vm.$el
   vm 挂载的DOM节点

   console.log(vm.$el);  //输出：<div>0</div>  //输出类型为object 

    

3. vm.$options
   vue实例初始化的对象，会添加一些默认参数，上例输出：
   
4. vm.$root
   vue组件树的根实例，组件树中任意组件访问的vm.$root都是一样的，上例中没有父实例，所以输出为自己
   
5. vm.$parent
   vm的父实例。
6. vm.$props
   当前组件接受的props对象
7. vm.$children
   当前实例的子组件(留到组件学完补充)
8. vm.$slots  vm.$scopedSlots
   插槽概念(留到组件学完补充)
9. vm.$refs
   注册过ref的DOM元素或者组件实例
10. vm.$isServer
    用来判断是否在服务器端，主要用于服务端渲染的时候。

vue instance 上的方法

1. vm.$watch
   vm.$watch功能上和vue实例中的watch方法相同

       const vm = new Vue({
           el: "#app",
           template: `<div>{{text}}</div>`,
           data: {
               text: 0
           },
           // watch: {
           //     text(newValue,oldValue){
           //         console.log(`${oldValue} : ${newValue}`);
           //     }
           // },
       })
   
       setInterval(() => {
           vm.$data.text += 1;
       }, 1000)
   
       //text : 监听的属性值
       //newValue: 变化之后text的值
       //oldValue: 变化之前text的值
       vm.$watch('text', (newValue,oldValue) => {
           Console.log(`${oldValue} : ${newValue}`);
       })
       //上述vm.$watch实现方法和 vm实例中watch中实现的功能相同

   不同点：
   vm 中watch的对text的监听在vm实例销毁的时候自动移除。
   通过vm.$watch添加的监听，需要主动移除监听。
   移除方法：

       //上例代码修改
       //text : 监听的属性值
       //newValue: 变化之后text的值 新值参数在前
       //oldValue: 变化之前text的值 老值参数在后
       //vm.$watch 最后会返回一个方法（unWatch）,通过调用unWatch()移除监听
       const unWatch = vm.$watch('text', (newValue, oldValue) => {
           console.log(`${oldValue} : ${newValue}`);
           //setTimeout 中2S移除监听，
           //输出结果因为：
           //0 : 1
           //1 : 2
       })
       // 2S 后移除vm.$watch监听
       setTimeout(() => {
           unWatch();
       }, 2000)

    

2. vm.$on 、vm.$once、vm.$emit、vm.$off
   绑定：vm.$on 、vm.$once(只触发一次)
   触发：vm.$emit
   移除：vm.$off

       setInterval(() => {
           vm.$data.text += 1;
           //触发指定事件 vm.$data.text为触发事件所带的参数
           vm.$emit('eventOne', vm.$data.text);
       }, 1000)
   
       //绑定eventOne事件 触发事件所携带的参数，将作为函数的参数传入
       //vm.$once //也是绑定事件方法，用法一样；区别:vm.$once只能触发一次
       vm.$on('eventOne', (param1) => {
           console.log(`eventOne emited ${param1}`)
       })

    

3. vm.$set、vm.$delete
   vm.$set 是给响应式的对象（基本都是vue实例中的data对象）添加一个新的属性，并且这个新的属性也是响应式的。
   响应式解释：就是当这个对象改变的时候，vue会重新渲染
   问题场景：当前vm实例的data中新增一个obj:{}属性，在运行过程中添加了一个a属性，即obj：{a:1}，此时的obj.a是不具备响应式的。
   解决方法：1.（推荐）在定义obj的时候，首先考虑到后续用到的值，通过obj：{a:0}方式提前定义
                     2.（不推荐）使用vm.$forceUpdate()强制重新渲染当前实例
                             原因：开销比较大
                     3.   使用vm.$set

      //此时obj.a每次改变，都会重新渲染 
      const vm = new Vue({
           el: "#app",
           template: `<div>{{obj.a}}</div>`,
           data: {
               text: 0,
               obj: {}
           },
       })
       let i = 1;
       setInterval(() => {
           i++;
           vm.$set(vm.obj, 'a', i);
       }, 1000)

   vm.$delete 删除对象属性。响应式对象删除的时候会更新视图