vue$（vue30官方文档）

## Vue.js 中的 `$` (美元符号)

简介

在 Vue.js 中，`$` (美元符号) 前缀用于区分 Vue 实例自身的属性和方法，与用户定义的数据属性区分开来。这有助于避免命名冲突，并提高代码的可读性。

一、`$data`

内容详细说明:

`$data` 属性包含 Vue 实例的所有响应式数据。它是一个对象，其中包含在 Vue 实例的 `data` 选项中定义的所有属性。可以直接访问和修改 `$data` 对象的属性，这将触发 Vue 的响应式系统并更新相关的视图。```javascriptconst app = Vue.createApp({data() {return {message: 'Hello Vue!'}},mounted() {console.log(this.$data.message); // 输出 "Hello Vue!"this.$data.message = 'Updated Message'; // 更新 message 的值}}).mount('#app');```

二、`$props`

内容详细说明:

`$props` 属性包含从父组件传递给子组件的所有 props。它也是一个对象，可以直接访问其中的属性。修改 `$props` 属性的值是不推荐的，因为 props 应该被视为只读的。```javascript// 子组件const ChildComponent = {props: ['name'],mounted() {console.log(this.$props.name); // 输出父组件传递的 name 值}};```

三、`$el`

内容详细说明:

`$el` 属性指向 Vue 实例挂载的根 DOM 元素。可以通过 `$el` 直接访问和操作该 DOM 元素。```javascriptconst app = Vue.createApp({mounted() {console.log(this.$el); // 输出挂载的 DOM 元素this.$el.style.backgroundColor = 'lightblue'; // 修改 DOM 元素的样式}}).mount('#app');```

四、`$options`

内容详细说明:

`$options` 属性包含 Vue 实例的选项对象，包括 `data`、`methods`、`computed`、`components` 等。可以通过 `$options` 访问这些选项。```javascriptconst app = Vue.createApp({data() {return { message: 'Hello' }},methods: {greet() {console.log('Hello!');}},mounted() {console.log(this.$options.data()); // 访问 data 选项this.$options.methods.greet(); // 调用 methods 中的方法}}).mount('#app');```

五、`$refs`

内容详细说明:

`$refs` 属性包含通过 `ref` 属性注册的子组件或 DOM 元素。可以通过 `$refs` 直接访问这些子组件或 DOM 元素。```html```

六、实例方法 (以 `$` 开头的)

内容详细说明:

Vue 实例还提供了一些以 `$` 开头的内置方法，例如 `$nextTick`、`$forceUpdate`、`$mount`、`$destroy` 等。这些方法提供了对 Vue 实例生命周期和行为的控制。

总结

`$` 前缀在 Vue.js 中起到了重要的作用，它区分了 Vue 实例自身的属性和方法，避免了命名冲突，并提高了代码的可读性和 maintainability。理解 `$` 的用法对于编写清晰、高效的 Vue.js 代码至关重要。

Vue.js 中的 `$` (美元符号)**简介**在 Vue.js 中，`$` (美元符号) 前缀用于区分 Vue 实例自身的属性和方法，与用户定义的数据属性区分开来。这有助于避免命名冲突，并提高代码的可读性。**一、`$data`*** **内容详细说明:** `$data` 属性包含 Vue 实例的所有响应式数据。它是一个对象，其中包含在 Vue 实例的 `data` 选项中定义的所有属性。可以直接访问和修改 `$data` 对象的属性，这将触发 Vue 的响应式系统并更新相关的视图。```javascriptconst app = Vue.createApp({data() {return {message: 'Hello Vue!'}},mounted() {console.log(this.$data.message); // 输出 "Hello Vue!"this.$data.message = 'Updated Message'; // 更新 message 的值}}).mount('

app');```**二、`$props`*** **内容详细说明:** `$props` 属性包含从父组件传递给子组件的所有 props。它也是一个对象，可以直接访问其中的属性。修改 `$props` 属性的值是不推荐的，因为 props 应该被视为只读的。```javascript// 子组件const ChildComponent = {props: ['name'],mounted() {console.log(this.$props.name); // 输出父组件传递的 name 值}};```**三、`$el`*** **内容详细说明:** `$el` 属性指向 Vue 实例挂载的根 DOM 元素。可以通过 `$el` 直接访问和操作该 DOM 元素。```javascriptconst app = Vue.createApp({mounted() {console.log(this.$el); // 输出挂载的 DOM 元素this.$el.style.backgroundColor = 'lightblue'; // 修改 DOM 元素的样式}}).mount('

app');```**四、`$options`*** **内容详细说明:** `$options` 属性包含 Vue 实例的选项对象，包括 `data`、`methods`、`computed`、`components` 等。可以通过 `$options` 访问这些选项。```javascriptconst app = Vue.createApp({data() {return { message: 'Hello' }},methods: {greet() {console.log('Hello!');}},mounted() {console.log(this.$options.data()); // 访问 data 选项this.$options.methods.greet(); // 调用 methods 中的方法}}).mount('

app');```**五、`$refs`*** **内容详细说明:** `$refs` 属性包含通过 `ref` 属性注册的子组件或 DOM 元素。可以通过 `$refs` 直接访问这些子组件或 DOM 元素。```html```**六、实例方法 (以 `$` 开头的)*** **内容详细说明:** Vue 实例还提供了一些以 `$` 开头的内置方法，例如 `$nextTick`、`$forceUpdate`、`$mount`、`$destroy` 等。这些方法提供了对 Vue 实例生命周期和行为的控制。**总结**`$` 前缀在 Vue.js 中起到了重要的作用，它区分了 Vue 实例自身的属性和方法，避免了命名冲突，并提高了代码的可读性和 maintainability。理解 `$` 的用法对于编写清晰、高效的 Vue.js 代码至关重要。