发布时间：2023-05-11 文章分类：WEB开发, 电脑百科投稿人：李佳字号：默认 | 大 | 超大打印

$开头的变量只是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>
export default {
  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>
export default {
  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>

第一个参数两种可能：

传入被观察对象表达式（字符串），比如demo , demo.num
如果表达式无法表示需要观察的内容，可以通过函数返回，比如: () => this.demo.num
在需要取消的时候，执行 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>
export default {
  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是检测不到数据变化的：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
由于 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>
export default {
  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>
export default {
  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;
      // 重置整个$data
      this.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>
export default {
  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>
import CT from "./CT.vue";
export default {
  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的广播事件有两种方案：

使用$on方法接收广播事件：vm.$on( 'eventname', fn )
使用自定义事件：<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的三种用法

标签 Vue, vue2, 实例方法

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