vue.js的两个核心
1、数据驱动,也叫双向数据绑定。
Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。
2、组件系统。
.vue组件的核心选项:
1、模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
2、初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。
3、接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。
4、方法(methods):对数据的改动操作一般都在组件的方法内进行。
5、生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。
6、私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
等等。
构建用户界面的渐进式框架
的理解
渐进式代表的含义是:没有多做职责之外的事。
vue.js只提供了 vue-cli 生态中最核心的 组件系统 和 双向数据绑定。
像vuex、vue-router都属于围绕 vue.js开发的库。
异步更新队列
Vue在观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一个事件循环中发生的所以数据改变。在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。然后,在下一个事件循环tick中,Vue刷新队列并执行实际(已去重的)工作。所以如果你用一个for循环来动态改变数据100次,其实它只会应用最后一次改变,如果没有这种机制,DOM就要重绘100次,这固然是一个很大的开销。
$nextTick的使用
<div id="app">
<div id="div" v-if="showDiv">这是一段文本</div>
<button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
el : "#app",
data:{
showDiv : false
},
methods:{
getText:function(){
this.showDiv = true;
this.$nextTick(function(){
var text = document.getElementById('div').innnerHTML;
console.log(text);
});
}
}
})
</script>
Vue 组件中 data 为什么必须是函数?
<script>
export default {
data() {
return { // 返回一个唯一的对象,不要和其他组件共用一个对象进行返回
menu: MENU.data,
poi: POILIST.data
}
}
}
</script>
因为一个组件是可以共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象,返回一个唯一的对象,不要和其他组件共用一个对象。
详细解读
Vue.component('my-component', {
template: '<div>OK</div>',
data() {
return {} // 返回一个唯一的对象,不要和其他组件共用一个对象进行返回
},
})
这个操作是一个简易操作,实际上,它
- 首先需要创建一个组件构造器,
- 然后注册组件。
- 注册组件的本质其实就是建立一个组件构造器的引用。
- 使用组件才是真正创建一个组件实例。
所以,注册组件其实并不产生新的组件类,但会产生一个可以用来实例化的新方式。
Vue组件调用父组件中的方法
通过v-on 监听 和$emit触发来实现:
1、在父组件中 通过v-on 监听 当前实例上的 自定义事件。
2、在子组件 中 通过’$emit’触发 当前实例上的 自定义事件。
示例:
父组件:
<template>
<div class="fatherPageWrap">
<h1>这是父组件</h1>
<!-- 引入子组件,v-on监听自定义事件 -->
<emitChild v-on:emitMethods="fatherMethod"></emitChild>
</div>
</template>
<script type="text/javascript">
import emitChild from '@/page/children/emitChild.vue';
export default{
data () {
return {}
},
components : {
emitChild
},
methods : {
fatherMethod(params){
alert(JSON.stringify(params));
}
}
}
</script>
子组件:
<template>
<div class="childPageWrap">
<h1>这是子组件</h1>
</div>
</template>
<script type="text/javascript">
export default{
data () {
return {}
},
mounted () {
//通过 emit 触发
this.$emit('emitMethods',{"name" : 123});
}
}
</script>
编写可复用的组件
在编写组件的时候,时刻考虑组件是否可复用是有好处的。一次性组件跟其他组件紧密耦合没关系,但是可复用组件一定要定义一个清晰的公开接口。
Vue.js组件 API 来自 三部分:prop、事件、slot:
- prop 允许外部环境传递数据给组件,在vue-cli工程中也可以使用vuex等传递数据。
- 事件允许组件触发外部环境的 action
- slot 允许外部环境将内容插入到组件的视图结构内。
Vue生命周期
vue生命周期和生命周期钩子函数:
vue 的生命周期是: vue 实例从创建到销毁,也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。
在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
生命周期钩子函数(11个) | 详细 |
---|---|
beforeCreate | 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 |
created | 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer), 属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。 |
beforeMount | 在挂载开始之前被调用:相关的 render 函数首次被调用。 |
mounted | el 被新创建的 vm. el 也在文档内。 |
beforeUpdate | 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。 |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 |
activated | keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。 |
deactivated | keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。 |
beforeDestroy | 实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用。 |
destroyed | Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。 |
errorCaptured(2.5.0+ 新增) | 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。 |