首页 > 代码库 > vue实例
vue实例
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 = http://www.mamicode.com/{ 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 =http://www.mamicode.com/== 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生命周期
生命周期流程、生命周期函数
vue实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。