vue实例（instance）

1. vue instance声明方式

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

2. 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实例初始化的对象，会添加一些默认参数，上例输出：

![](https://img2020.cnblogs.com/blog/2174201/202109/2174201-20210909174820969-1257639220.png)


4. vm.$root
vue组件树的根实例，组件树中任意组件访问的vm.$root都是一样的，上例中没有父实例，所以输出为自己

![](https://img2020.cnblogs.com/blog/2174201/202109/2174201-20210909174853909-1197652034.png)


5. vm.$parent
vm的父实例。

6. vm.$props
当前组件接受的props对象

7. vm.$children
当前实例的子组件

8. vm.$slots  vm.$scopedSlots
插槽概念

9. vm.$refs
注册过ref的DOM元素或者组件实例

10. vm.$isServer
用来判断是否在服务器端，主要用于服务端渲染的时候。

3. 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 删除对象属性。响应式对象删除的时候会更新视图