【Vue实例】

jerryloveemily 发布于2019-08-20 18:31 / 1645人阅读

摘要：的介绍就直接连接到官网了，官网介绍很详细了介绍构造函数在使用之前我们首先需要构建实例以上代码是通过构建了一个实例，构造函数中是一个对象，上面代码我用了一个空的对象，对象中可以包含数据模板挂载元素方法生命周期钩子等选项。

使用过一段时间的vue1.0,现在vue已经更新了很多版本了，语法在很多地方也有了变化。在此记录一下重新学习的过程以及对vue的一些自己的理解。vue的介绍就直接连接到官网了，官网介绍很详细了【Vue介绍】

1. 构造函数

在使用之前我们首先需要构建vue实例

var vm = new Vue({

    })

以上代码是通过 new 构建了一个vue实例，构造函数中是一个对象，上面代码我用了一个空的对象，对象中可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

【我们可以通过extend对vue构造器进行扩展】

var MyComponent = Vue.extend({
  // 扩展选项
})

// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

以上代码中通过extend进行了vue构造函数的扩展，我们使用 MyComponent 生成的每一个实例都将拥有扩展中的属性。

2. 属性与方法

我们上面在创建实例的时候传入的是一个空的对象，实际使用中这个对象中是有属性的。

let data = {
    name: "blue"
}

let vm = new Vue({
    data
})

vm.name === data.name;  //true

data.name = "Crazy";
vm.name;    // Crazy

vm.name = "Pink";
data.name;  //Pink

上面代码使用的是ES6的语法，应该能懂。上面代码中Vue实例【vm】在创建的过程中加入了一个data属性，我们可以通过【vm】实例访问到 name 属性，说明vue实例会对data对象中的每一个属性进行【代理】（也就是托管），所以我们不管是更改【对象data】还是更改【实例vm】属性都会同步name属性。

let data = {
    name: "blue"
}

let vm = new Vue({
    data
})

vm.$data;

我们可以通过上面一种方式访问到整个实例的【data属性】对象，还有一些暴露在实例中的属性和方法，他们都是用$为前缀。这儿就不多说了参考手册里有详细的说明。【API参考手册】

3. Vue实例的生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些【生命周期钩子】（一些实例方法，用于生命周期中我们更愿意叫他们为钩子函数），这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用：

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log("a is: " + this.a)
  }
})
// -> "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分布在这些钩子中。

4. Vue生命周期图示

下面这张图是官方给出的生命周期图示，我只是把它翻译成中文了

GPU云服务器云服务器 vue实例属性 Vue_Vue Vue vue3 学习笔记 (五)——vue3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84617.html

vue - 响应式原理梳理(一)

摘要：问题为什么修改即可触发更新和的关联关系官方介绍的官网文档，对响应式属性的原理有一个介绍。因此本文在源码层面，对响应式原理进行梳理，对关键步骤进行解析。描述我们通过一个简单的 Vue应用来演示 Vue的响应式属性： html： {{message}} js: let vm = new Vue({ el: #ap...

weknow619 2019-08-23 14:56 评论0 收藏0
Vue2.5笔记：Vue的实例与生命周期

摘要：总结这边文章主要是介绍了下的实例与生命周期，在实例化的过程中我们可以添加许多可选对象，比如生命周期钩子函数等，让实例产生我们想要的行为。理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步，也是非常必须的，因为实例是它的一个起点，也是它的一个入口，只有我们创建一个 Vue 实例之后，我们才行利用它进行一些列的操作。首先 Vue 没有完全遵守 MVVM 的架构模式，但是它的设...

Ashin 2019-08-23 12:10 评论0 收藏0
vue入门笔记体系（一）vue实例

摘要：就是实例中的对象当前组件接收到的对象。当前组件数的根实例如果当前实例没有父实例，此实例将会是其自己当前实例的直接子组件。 vue实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项 }) 当创建一个 Vue 实例时，你可以传入一个选项对象。作为参考，你也可以在 api/#选项-数据文档中浏览完整的选...

microelec 2019-08-26 17:42 评论0 收藏0
Vue 实例中的生命周期钩子详解

摘要：实例在文档中经常会使用这个变量名表示实例，在实例化时，需要传入一个选项对象，它可以包含数据模板挂载元素方法生命周期钩子等选项。通俗说就是实例从创建到销毁的过程，就是生命周期。 Vue 实例中的生命周期钩子 Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程...

gityuan 2019-08-20 15:16 评论0 收藏0
你想知道的vue实例

摘要：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。在配置数据观测编译模板挂载实例到，然后在数据变化时更新的过程中，实例会调用一些生命周期钩子。 vue的实例 vue构造器每个Vue.js应用都是通过构造函数Vue 创建一个 Vue的根实例启动的：我们首先复习一下构造函数 function a(){ } // 当一个函数用来创建一个实例的时候，就叫做构造函数 // 我们...

dendoink 2019-08-20 19:04 评论0 收藏0