Vue实例上的方法
- 数据
- 事件
- 生命周期
1 数据
- vm.$watch
- vm.$set
- 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 事件
- vm.$on
- vm.$emit
- vm.$once
- 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 生命周期
- vm.$mount
- vm.$forceUpdate
- vm.$nextTick
- 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()
销毁一个实例。
清理它与其他实例的连接,解绑它全部指令及事件监听器
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。