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

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

Vue实例的特征

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

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

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

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

<code>const vm = new Vue({ });/<code>

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

数据与方法

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

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

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

然后，我们添加代码：

<code>console.log(vm.foo);/<code>

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

换句话说，如果我们有：

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

console.log(vm.foo === data.foo);/<code>

然后console.log将输出为true。

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

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

<code>let data = { foo: "bar" };

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

vm.a = 1;/<code>

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

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

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

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

因此，如果我们有：

<code>let data = { foo: "bar", a: 1 };

Object.freeze(data);

const vm = new Vue({
  el: "#app",
  data
});/<code>

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

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

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

$el

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

例如，如果我们有：

<code>let data = {foo："bar"};

const vm = new Vue({
  el："#app"，
  data
});

console.log(vm.$el === document.getElementById("app"));/<code>

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

$data

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

因此，如果我们有：

<code>let data = { foo: "bar" };

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

console.log(vm.$data === data);/<code>

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

$watch

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

例如，如果我们有：

src/ index.js

<code>let data = {foo: "bar"};

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

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

src/ index.html：

<code>

  
    <title>Hello/<title>
    
    
     

  
    

      
    

    
  
/<code>

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

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

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

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

总结

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

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

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

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

閱讀更多 前端知否 的文章

關鍵字: 虚拟机 基础知识 HTML