Vue 实例常用的属性和方法

一、Vue实例常用属性

1.1、vm.$ el、vm.$ data

问题：

在 new Vue 实例时我们经常设置 el、data 选项，data 选项里面又可以定义很多属性（常称为数据属性），那么能不能获取到 el所挂载的 dom 元素，能不能获取 data 对象呢？

答案：

可以。因为 Vue 实例提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

作用：

通过 Vue 实例属性 vm.$el 即可获取到 Vue 实例挂载到的 dom元素，返回的是一个 dom 对象，如 div，拿到 dom 元素后我们可以为它设置样式之类的。

通过 Vue 实例属性 vm.$data 即可获取到 Vue 实例 data 选项数据对象，返回的是一个对象。

总结：

vm.$el是使用另一种方式来挂载dom元素

vm.$data是获取data中的对象，使用vm.$data.xxx来获取

结果

注意：上面 vm 改为 this 可以吗？
不可以，在 new Vue 内部才可以用this

1.2、vm.$ options、vm.$refs

作用：

至今我们在 new Vue 实例时学过如下选项的设置：el、data、methods、computed、watch、钩子函数等（后续还会学一些）。此外，也可以自定义一些选项，可以是简单属性也可以是方法，然后可以通过 vm.$options 获取自定义选项，当然 vm.$options 也可以获取默认选项值【只不过 el、data 上面有更简单获取方式】。

总结：

vm.$options是获取vue元素下面的选项（el、data、methods等），且选项是可以自己定义的。

vm.$refs是用来获取dom元素的，用vue的思想使用数据驱动来获取dom元素。

在使用 JS/Jquery 获取页面的 DOM 元素时，我们一般是根据id、class、标签、属性等其它标识来获取到页面上的 DOM 元素。可以说，我们很难抛弃 Jquery 的一个重大原因，就是当我们需要获取到页面上的 DOM 元素时，使用 Jquery 的 API 相比于原生的 JS代码，简单到极致。

js原生代码获取dom

document.getElementById(‘id’).value => $(‘#id’).val()

这种直接操纵 DOM 元素的方式，与我们使用 Vue 的初衷不符，虽然能达成效果，但是却不提倡（因为 Vue采用 Virtual DOM 的做法渲染网页，如果我们直接操作 DOM，很容易产生实际网页跟 Vue 产生的 Virtual DOM 不同步的问题），这里我们就可以使用 ref 来获取页面上的 DOM 元素

vm.$refs 属性用来获取页面中所有具有 ref 属性的元素【因此要先设置 ref 属性】,返回的是 dom 元素集合对象。

先会弹出一个 “1111”的对话框，然后结果如下图。

二、vm.$ mount()、vm.$nextTick() （Vue 实例常用方法 ——生命周期）

2.1、vm.$mount（）

作用：

用来实现手动挂载 vm 实例到哪个 dom 元素上

总结：

该方法是手动用另一种方式来挂载元素。

vue.$mount()

也可以省略vue直接在vue实例后面.$mount()

因此上面vue代码可以写成如下：

2.2、vm.$nextTick()

作用：vm.$nextTick(callback) 在 dom 更新完成之后再执行此回调函数，一般是在修改数据之后使用该方法，以便获取更新后的 dom。

总结：该方法是可以控制在执行vm.$nextTick()后在刷新dom元素，因为该方法是在修改元素的值和渲染dom元素的值之间的方法，可以在修改元素的值后但渲染dom元素之前进行一系列的操作。

运行结果：

分析：

上面改变 name 的值，DOM 中显示出来的是修改后的值，但是发现后面打印输出的 textContent 取到的仍然是前面的张三，原因如下：

dom 还没更新完成，Vue 实现响应式并不是数据发生改变之后dom 立即变化，需要按照一定的策略进行 dom 更新，需要一定的时间，而下面的代码立即执行（执行完上面的更新语句，立即执行下面的代码，这个速度很快的，比 dom 更新要快的，即是下面语句先执行了，然后才更新 dom 的），所以还是未更新前的。

那么如何做可以让 console.log(vm.$refs.title.textContent)在

dom 更新完成之后再执行呢？

使用 vm.$nextTick(callback)方法，该方法里面是一个回调函数，回调函数就会等到 dom 更新之后再执行

结果

三、vm.$ set()、 vm.$delete()（Vue 实例常用方法——为对象添加和删除属性)

总结：

vm.$set(this.user,‘age’,28)

改为可以

this.user.age=28;

但是这样添加属性，你会发现对象里面是有了属性 age，但是在页面里面没有显示出来 age，也就是说这种添加属性不是响应式的(即时同步数据)，要响应式的就需要采用 vm.$set，一添加数据页面上有的话就会立马显示。

vm.$delete(object,key)作用：删除对象属性：删除 object 对象的属性 key

vm.$delete(this.user,‘age’)

且可以使用全局的来代替，如下：

Vue.delete(this.user,‘age’）

3.1、vm.$set

作用：

vm.$set(object，key，value)——为对象添加属性：为对象添加属性 key，并给定属性值 value

注意：属性名 age 外单引号不能少。当然可以是双引

另外，vm.$set 是全局 Vue.set 的别名，即是可以用 Vue.set 来实现,即上面的

vm.$set(this.user,‘age’,28）

代码又可以改为下面的代码：

Vue.set(this.user,‘age’,22);

Vue.set是全局的 set 方法，写法前面是Vue，后面的 set前没有$符号

3.2、 vm.$delete

作用：vm.$delete(object,key)作用：删除对象属性：删除 object 对象的属性 key

另外，vm.$delete 是全局 Vue.delete 的别名，即可以用
Vue.deletet 来实现也可以用下面的代码来实现
Vue.delete(this.user,‘age’）