Vue.js基础知识— Vue实例

发布于2/21/2020 来自:「前端知否」微信公众号

xxx

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方法来监听数据中的更改。