Vue实例知识点分享

---

导文

Vue的实例是用来创建 Vue 应用程序的对象。通过实例化 Vue 构造函数，我们可以创建一个具有响应式数据、计算属性、方法和生命周期钩子等特性的 Vue 实例。

下面是创建 Vue 实例的基本步骤

1. 引入 Vue.js 库：在 HTML 文件中引入 Vue.js 库，可以通过 CDN 或下载本地文件进行引入。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 创建 Vue 实例：使用 new Vue() 创建一个 Vue 实例，并传入一个配置对象作为参数。

var app = new Vue({
  // 配置对象
});

在配置对象中，我们可以指定以下几个属性：

• el：指定 Vue 实例所挂载的元素，可以是一个 CSS 选择器字符串或一个 DOM 元素。

• data：定义 Vue 实例的初始数据，通常是一个包含多个属性和对应值的对象。

• computed：定义计算属性，根据已定义的数据属性计算出一个新的值并返回。

• methods：定义 Vue 实例的方法，可以在模板中调用。

• created/mounted：生命周期钩子函数，在 Vue 实例被创建/挂载到 DOM 后执行相应的操作。

3. 挂载到DOM：将 Vue 实例挂载到指定的 DOM 元素上。

app.$mount("#app");

这样，Vue 实例就与指定元素绑定起来了，可以通过访问 app 对象来操作和更新数据，并在模板中进行双向绑定、事件监听等操作。

常用的 Vue 实例方法和属性

当创建一个 Vue 实例后，我们可以通过 Vue 的实例方法和属性来操作和管理应用程序的状态和逻辑。

下面是一些常用的 Vue 实例方法和属性：

• $data：访问 Vue 实例中的数据对象。可以通过 app.$data 或直接在模板中使用 $data 来获取数据。

console.log(app.$data);

• $props：访问组件实例接收的 props 数据。对于组件实例，可以通过 app.$props 访问传递给组件的 props 数据。

console.log(app.$props);

• $watch：监听数据的变化。可以使用 $watch 方法监测指定数据的变化，并在变化时执行相应的回调函数。

app.$watch("propertyName", function(newValue, oldValue) {
  // 处理数据变化
});

• $set：向响应式对象添加新属性。有时候我们需要向已有的响应式对象中动态添加属性，可以使用 $set 方法。

app.$set(app.object, "newProperty", value);

• $on / $emit：自定义事件的监听与触发。使用 $on 方法监听自定义事件，使用 $emit 方法触发自定义事件。

app.$on("customEvent", function(data) {
  // 监听自定义事件
});


app.$emit("customEvent", eventData);

• $refs：访问组件或元素的引用。可以通过 ref 属性给组件或元素指定引用名称，并通过 $refs 访问引用。

<my-component ref="myRef"></my-component>

app.$refs.myRef; // 访问组件实例或元素

• $mount：手动挂载 Vue 实例。如果没有在创建实例时指定 el 属性，则需要手动调用 $mount 方法将实例挂载到指定的 DOM 元素上。

app.$mount("#app");

上述方法和属性只是 Vue 实例提供的一部分功能，还有更多的方法和属性可以用于处理事件、生命周期钩子、异步操作等。

总结

通过使用 Vue 实例，我们可以更方便地访问和管理应用程序的数据、状态和行为。同时，Vue 实例也是Vue框架中组件化开发的基础，通过实例可以创建包含特定功能和样式的可复用组件。

总结来说，Vue 的实例是用来管理应用程序状态和逻辑的对象，它提供了一种方便的方式来组织和操作应用程序的数据和行为。