vue实例_vm.$forceupdate()-CSDN博客

本文链接：https://blog.csdn.net/weixin_45765548/article/details/117402936

本文介绍了Vue组件中的实例，重点讲解了vue实例的属性，如$slots、$scopedSlots和$refs。还详细阐述了如何使用$set添加响应式属性，以及如何利用Vue.delete删除响应式属性。此外，讨论了实例的事件处理方法，包括$on、$once、$off和$emit。最后，提到了Vue实例的生命周期方法，如$mount、$forceUpdate、$nextTick和$destroy。

摘要由CSDN通过智能技术生成

在这里插入图片描述
每个组件的内部都是一个vue实例，其中的this就指向该实例。

一、实例的属性值

vm.$data
Vue 实例观察的数据对象

vm.$props
当前组件接收到的 props 对象。

vm.$el
Vue 实例使用的根 DOM 元素.

vm.$options
用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处：
在这里插入图片描述

vm.$root
当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。

vm.$parents
父实例，如果当前实例有的话。

vm.$children
当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。

vm.$slots

（用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。
请注意插槽不是响应性的。如果你需要一个组件可以在被传入的数据发生变化时重渲染，我们建议改变策略，依赖诸如 props 或 data 等响应性实例选项。）

: vm.$scopedSlots
在这里插入图片描述

: vm.$refs

一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

vm.$isServer
当前 Vue 实例是否运行于服务器。

vm.$attrs
在这里插入图片描述

vm.listeners
在这里插入图片描述
二、实例的方法（数据）
（1）vm.$watch( expOrFn, callback, [options] )
观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。
注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。
在这里插入图片描述

取消观察可以避免内存泄露