Vue.js入门教程：掌握Vue实例的基本概念

发表时间: 2020-02-21 14:30

Vue.js是一个易于使用的Web应用程序框架，可用于开发交互式前端应用程序。

在本文中，我们将更详细地介绍Vue实例，包括如何定义它以及它的一些属性。

Vue实例的特征

每个Vue.js应用程序都从定义一个新的Vue实例开始。 Vue构造函数参数是一个带有各种属性的options对象。

我们经常使用vm来引用Vue实例，其中vm代表ViewModel。

Vue应用程序大致遵循Model-View-ViewModel模式，其中ViewModel具有应用程序的业务逻辑，View具有用户看到的视图，而Model具有数据。

例如，我们可以如下定义一个Vue实例：

const vm = new Vue({ });

每个Vue应用都包含一个根Vue实例，并由new Vue创建。我们可以将其整理成一棵树，以便于维护。

数据与方法

传递给Vue构造函数的options对象可以具有数据和方法。

例如，如果我们如下定义Vue实例：

const vm = new Vue({  el: "#app",  data: { foo: "bar" }});

然后，我们添加代码：

console.log(vm.foo);

在我们的vm定义下面，由于data.foo的值为'bar'，所以我们得到'bar'。

换句话说，如果我们有：

const data = { foo: "bar" };const vm = new Vue({  el: "#app",  data});console.log(vm.foo === data.foo);

然后console.log将输出为true。

数据更改时，应用程序将使用新数据重新渲染。

如果我们在vm中创建一个新属性并将其设置如下：

let data = { foo: "bar" };const vm = new Vue({  el: "#app",  data});vm.a = 1;

该应用不会重新渲染。而如果我们写：

let data = { foo: "bar", a: 1 };const vm = new Vue({  el: "#app",  data});

然后，该应用将重新渲染。这意味着我们必须将要渲染的数据放入data字段。

如果我们使用Object.freeze()冻结传递给data的对象，则Vue应用将不会重新渲染，因为无法更改属性。

因此，如果我们有：

let data = { foo: "bar", a: 1 };Object.freeze(data);const vm = new Vue({  el: "#app",  data});

初始渲染后无法进行任何更改，因为我们使用Object.freeze冻结了数据。

Vue实例还公开了许多实例属性和方法。

它们以$开头，以便让我们知道它们是Vue实例的一部分。

$el

我们具有$el属性，用来获取Vue实例所在的DOM元素。

例如，如果我们有：

let data = {foo："bar"};const vm = new Vue({  el："#app"，  data});console.log(vm.$el === document.getElementById("app"));

然后，由于我们的Vue实例位于ID为app的元素中，所以console.log将输出为true。

$data

$data属性等价于传递给Vue构造函数的options对象中设置的data属性的值。

因此，如果我们有：

let data = { foo: "bar" };const vm = new Vue({  el: "#app",  data});console.log(vm.$data === data);

然后，由于data与vm.$data引用相同的对象，所以console.log输出true。

$watch

$watch是一个实例方法，可让我们监听options参数里data对象中的更改。

例如，如果我们有：

src/ index.js

let data = {foo: "bar"};const vm = new Vue({  el: "#app"，  data});vm.$watch("foo", (newValue,oldValue) => {  console.log(newValue, oldValue);});

src/ index.html：

<!DOCTYPE html><html>  <head>    <title>Hello</title>    <meta charset="UTF-8" />    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  </head>    <body>    <div id="app">      <input type="text" v-model="foo" />    </div>    <script src="./src/index.js"></script>  </body></html>

然后，当我们在输入框中输入内容时，console.log会输出data.foo新旧值：

vm.$watch("foo", (newValue, oldValue) => {  console.log(newValue, oldValue);});

这是因为data.foo属性的更改在被一直监听着。当我们在框中键入内容时，v-model会自动更新foo的值。

因此，当我们键入内容时，将监听foo的更改，并由传递给$watch方法的处理函数记录该更改。

总结

通过将具有data，el和methods属性的options对象传递给Vue构造函数来创建Vue实例。它返回我们Vue应用程序的实例。

实例具有$el属性，以获取我们的应用程序所在的DOM元素。

此外，还有$data属性可获取data属性的值，以获取options对象中的data属性值数据。

最后，我们有$watch方法来监听数据中的更改。

Vue.js入门教程：掌握Vue实例的基本概念

Vue实例的特征

数据与方法

总结

热门阅读

推荐阅读