Vue 实例上的办法

1. 数据
2. 事件
3. 生命周期

1 数据

1. vm.$watch
2. vm.$set
3. vm.$delete

1.1 vm.$watch(exp,callback,options)

exp:String|Function
callback: 参数 newVal,oldVal
options:{immediate,deep}
察看 Vue 实例一个表达式或函数计算结果的变动，自身会 返回 一个 勾销察看 的函数，调用后勾销察看

<template>
  <div id="app">
    <span>{{bar.foo}}</span>
    <button @click="add">+</button>
    <span> 原始值：{{oldVal}}</span>
    <span> 原始值：{{newVal}}</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      bar: {foo: 0,},
      oldVal: "",
      newVal: "",
    };
  },
  computed: {barCom() {return JSON.parse(JSON.stringify(this.bar));
    },
  },
  methods: {add() {this.bar.foo += 1;},
  },
  mounted() {
    this.$watch(
      "barCom",
      function (newVal, oldVal) {
        this.newVal = newVal.foo;
        this.oldVal = oldVal.foo;
      },
    );
  },
};
</script>

深度监听一个对象时，能够应用 计算属性 进行序列化与反序列化，不应用 deep 选项也能够实现深度监听
用 deep 深度监听时，只是监听到变动，oldVal 与 newVal 都是最新的值
不应用深度监听，间接监听到具体属性能够检测变动前后的值，而后进行解决

1.2 vm.$set(target,key,value) vm.$delete(target,key)

增加或批改 响应式对象的 property，target 不能是 Vue 实例或者 Vue 实例的根数据对象
性能与 Vue.set()和 Vue.delete()统一
Vue.set() 和 Vue.delete()

2 事件

1. vm.$on
2. vm.$emit
3. vm.$once
4. vm.$off

2.1 vm.$emit(eventName,…args) vm.$on(event,callback)

触发 与绑定 以后实例 的事件

// 父组件
<template>
  <div id="app">
    <Child ref="child" />
    <span>{{uname}}</span>
  </div>
</template>

<script>
import Child from "./components/Child.vue";
export default {
  name: "App",
  data() {
    return {uname: "",};
  },
  components: {Child,},
  methods: {setName(val) {this.uname = val;},
  },
  mounted() {this.$refs.child.$on("sendToApp", this.setName);
  },
};
</script>
// 子组件
<template>
  <div>
    <button @click="send"> 发送 </button>
  </div>
</template>

<script>
export default {data() {
    return {cname: "张三",};
  },
  methods: {send() {this.$emit("sendToApp", this.cname);
    },
  },
};
</script>

也能够在父组件中的 <Child/> 上用 v -on 的模式绑定事件，函数在父组件中解决，在子组件中触发事件传入数据，在父组件中调用，实现子组件向父组件传递数据
也能够把函数间接传给子组件，在子组件中用 props 接管，调用时传入参数，父组件执行回调也能接管子组件的数据

2.2 vm.$once(event,callback)

与 vm.$on 的作用相似，也是用于绑定事件，不过只 触发一次

2.3 vm.$off(event,callback)

解绑事件 ，如果传入一个事件 数组 ，能够实现解绑多个事件
无参数时，移除所有事件监听

3 生命周期

1. vm.$mount
2. vm.$forceUpdate
3. vm.$nextTick
4. vm.$destroy

3.1 vm.$mount(elementOrSelector)

手动的挂载一个未挂载的实例

const MyComponent = Vue.extend({data(){
        return {price:"九磅十五便士"}
    },
    template:'<p> 衬衫的加个是{{price}}</p>'
})

new MyComponent().$mount("#app")

3.2 vm.$forceUpdata()

强制 从新渲染 Vue 实例
仅仅影响实例自身和插槽内容，而不是所有子组件

3.3 vm.$nextTick(callback)

回调提早到下次 DOM 更新循环之后执行
能够在扭转数据后，获取到 最新的 DOM 元素
无参数时返回一个 Promise，能够应用 async/await 来执行同步代码
Vue.nextTick()

3.4 vm.$destroy()

销毁一个实例。
清理它与其余实例的连贯，解绑它全副指令及事件监听器