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组件的10个技巧

如何在Vuejs中实现页面空闲超时检测