vue实例

Posted 2020-09-09 小拽A

1.构造器

1.1.每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的：

1.2.在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

1.3.可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器

　var MyConponent = Vue.extends({})　

1.4.所有的 Vue.js 组件其实都是被扩展的 Vue 实例

2.属性

2.1每个 Vue 实例都会代理其 data 对象里所有的属性：

var data = { a: 1 }

var vm = new Vue({

data: data

})

vm.a === data.a // -> true

vm.a = 2

data.a // -> 2

data.a=3

vm.a=3//->

2.2.除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如：

vm.$data === data // -> true

vm.$el === document.getElementById(‘example‘) // -> true

2.3.vm.$watch(‘a‘, function (newVal, oldVal) {//这就是脏检查，通过比较前后新值和旧值的结果是否改变，如果改变就修改view

// 这个回调将在 `vm.a` 改变后调用

})

3.生命周期:每个 Vue 实例在被创建之前都要经过一系列的初始化过程。

　　例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会

var vm = new Vue({

　　data: {a: 1},

　　created: function () {console.log(‘a is: ‘ + this.a)}

})

4.也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。

5.生命周期：

5.1.new vue（）

5.2.data observer();//数据观测

5.3init event();//编译模板

5.4.挂载实例到模板

5.5.。。。

 

 总结：

1.构造器

 构造器的结构、扩展

2.属性

 vue对data属性的指代

data对data属性的指代

3.vue生命周期

 生命周期流程、生命周期函数