vue中@是什么意思（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> 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的基本用法 ref属性 加在普通元素上 ，用 this.refs.(ref值) 获取到的是dom元素 ref属性加在子组件上 ，用 this.refs.(ref值) 获取到的是组件实例 ，可以使用组件的所有方法 。 如果ref 是循环出来的 ，有多个重名 ，那么ref的值会是一个数组 vue里的$refs属性要注意的点 ref 需要在dom渲染完成后才会有 ，在使用的时候确保dom已经渲染完成 。比如在生命周期 mounted(){} 钩子中调用 ，或者在 this.$nextTick(()=>{}) 中调用 。 $ref本身作为渲染结果被创建 ，在初始渲染的时候不能访问他们 ，是不存在的 $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的三种用法创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！