vue2中的$符号（内置变量）

$开头的变量

只是

Vue

的命名规则，为了

区分普通变量属性

，避免我们自己声明或者添加

自定义

属性导致

覆盖

。

一、$data

vue的实例属性

$data

是用于获取

data

里数据的相当于用

this

获取。

<template><div><p><a@click="click()">$dataChange</a> | <a@click="click2()">thisChange</a></p><p>{{ data1 }}</p></div></template><script>exportdefault{name:"CT",data(){return{data1:'data1'};},mounted(){
    console.log(this.$data);},methods:{click(){this.$data.data1 ='$dataChange'},click2(){this.data1 ='thisChange'}},};</script>

二、$watch

$watch

函数实际上和配置项

watch

的作用是一样的，都是用来监听一个变量，区别在于：

• $watch函数更加灵活，可以随时随地添加监听
• $watch函数需要手动销毁，配置项watch会随组件的生命周期结束而自动销毁

<template><div><p><a@click="click()">add</a></p><p>{{ demo.num }}</p></div></template><script>exportdefault{name:"CT",data(){return{demo:{num:0},unwatch:null};},mounted(){this.unwatch =this.$watch('demo',()=>{
      console.log(this.demo.num);},{deep:true})},destroyed(){this.unwatch &&this.unwatch();},methods:{click(){this.demo.num++;},},};</script>

第一个参数两种可能：

1. 传入被观察对象表达式（字符串），比如demo , demo.num
2. 如果表达式无法表示需要观察的内容，可以通过函数返回，比如: () => this.demo.num
3. 在需要取消的时候，执行 unwatch() 即可取消

三、$el

获取

Vue

实例关联的

DOM

元素，

$el

指向当前组件

template

模板中的根标签。

四、$set

4.1 vue中双向数据绑定存在的问题

受

ES5

的限制，

Vue

不能检测到

对象属性

的

添加

或

删除

。因为

Vue

在

初始化实例

时将

属性转为 getter/setter

，所以属性

必须

在

data

对象上

才

能让

Vue.js

转换它，才能让它是

响应的

。
就像下面这样，

 vue并不能察觉

到

data

上的

demo对象

多了一个

属性add

：

<template><div><p><a@click="click()">add</a></p><p>-{{ demo.add }}-</p></div></template><script>exportdefault{name:"CT",data(){return{demo:{num:0}};},mounted(){this.demo.add =0;},methods:{click(){this.demo.num++;},},};</script>

4.2 $set要解决的问题

解决数据没有被双向绑定我们可以使用

 vm.$set

实例方法，该方法是全局方法

Vue.set

的一个别名。

4.3 什么时候使用$set

set为解决双向绑定失效而生，我们只需要关注什么时候双向绑定失效就可以了。

只要值的地址没有改变，vue是检测不到数据变化的：

1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength
3. 由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除

<template><div><p><a@click="click()">change1</a> | <a@click="click2()">change2</a></p><p>demo.add: {{ demo.add }}</p><p>array1[0]: {{ array1[0] }}</p><p>array2[2]: {{ array2[0] }}</p></div></template><script>exportdefault{name:"CT",data(){return{demo:{num:0},array1:[1],array2:[1]};},mounted(){},methods:{click(){this.array1[0]=2;this.array2.length =0;this.demo.add =0;},click2(){this.$set(this.array1,0,2);this.$set(this.array2,'length',0);this.$set(this.demo,'add',0);},},};</script>

五、$options

vue

实例属性

$options

是一个

对象

,可以调用

vue

的各个组件下的

方法

和

数据

，即

new vue({})

大括号内的东西，统称为

options

。

• 获取、调用data外定义的属性，this.$options.name
• 复用过滤器filters中的方法，this.$options.filters.xxx
• 一键搞定之重置data中的数据：this.xxxx= this.$options.data().xxxx;``````this.data = this.$options.data();

<template><div><p><a@click="click()">click</a> | <a@click="reset()">reset</a></p><p>demo.num: {{ demo.num }}</p></div></template><script>exportdefault{name:"CT",props:{id:{type: String,default:"CT",},},data(){return{demo:{num:0,},};},mounted(){
    console.log(this.$options.name);},methods:{click(){this.demo.num++;},reset(){// 重置某一个数据this.demo =this.$options.data().demo;// 重置整个$datathis.data =this.$options.data();},},};</script>

六、$refs

在

vue2

中，我们可以直接使用

ref

获取元素，也就是直接

在元素上绑定ref属性

，在直接使用

this.$refs['自定义属性名'] 

就能直接获取。$refs 是所有注册过的ref的一个集合。

• $refs的基本用法 1. ref属性 加在普通元素上，用 this.refs.(ref值) 获取到的是dom元素2. ref属性加在子组件上，用 this.refs.(ref值) 获取到的是组件实例 ，可以使用组件的所有方法 。3. 如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组
• vue里的$refs属性要注意的点 1. ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。2. $ref本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的3. $refs不是响应式的，只在组件渲染完成后才填充

七、$event

$event有下面两个作用：

• 获取原生DOM事件的事件对象
• 事件注册所传的参数(子组件向父组件传值)

<template><div><p><a@click="click()">click</a></p></div></template><script>exportdefault{name:"CT",props:{id:{type: String,default:"CT",},},data(){return{};},mounted(){
    console.log(this.$options.name);},methods:{click(){this.$emit('getData','from CT data');},},};</script>

<template><div><p@click="click($event)">BT</p><CT@getData="getData($event)"></CT></div></template><script>importCTfrom"./CT.vue";exportdefault{name:"BT",components:{CT},data(){return{};},methods:{click(event){
      console.log(event);},getData(event){
      console.log(event);}},};</script>

八、$emit

$emit

实际上是发送了一个广播事件，

$emit

调用时可以传递两个参数

$emit('eventname', data)

：

• eventname：事件名称
• data：跟随事件一起传递的数据

对于如何接受

$emit

的广播事件有两种方案：

1. 使用$on方法接收广播事件：vm.$on( 'eventname', fn )
2. 使用自定义事件：<CT @eventname="fn($event)"></CT>。实际上自定义事件就是vue自动帮我们调用了一下vm.$on( 'eventname', fn )函数

九、$router

全局的

router 实例

。通过

vue 根实例

中注入

 router 实例

，然后再注入到

每个子组件

，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其

push(), replace(), go()

等方法。

十、$route

当前

激活

的路由的信息对象。每个对象都是

局部的

，可以获取当前路由的

path, name, params, query

等属性。

十一、$store

代表的是

new Vuex({})

十二、$nextTick

在下次DOM更新循环结束后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM。

参考

• 浅谈vue中的 含义及其用法（ 含义及其用法（ 含义及其用法（xxx引用的位置）
• vue中的$
• vue 之 $符号
• vue中常见的$的用法
• vue中的$符号
• vue中$set用法详细讲解
• vue之$options
• Vue-$refs的基本用法
• vue中$refs的三种用法