1.vue组件间通信
组件间通信包括父子组件传值,兄弟组件传值
- 父子组件传值包括 父传子 子传父两种
父传子就是在父组件中定义值,通过子组件调用处 v-bind:person=person(bash
(1)vue组件间通信组件间通信包括父子组件传值,兄弟组件传值 - 父子组件传值包括 父传子 子传父两种 父传子就是在父组件中定义值,通过子组件调用处 v-bind:person=person(这个是在父组件定义的值)。然后在子组件通过props接收值。
parent.vue
<template>
<person :person=person />
</template>
import person from "./person"
export default {
data:{
return {
person:'123'
}
}
}
child.vue
<template>
<div> {{person}}</div>
</template>
export default {
props:['person']
}
(2).子传父
子传父是用事件传值,通过用$emit实现
child.vue
<template>
<h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
</template>
export default {
data() {
return {
title:"Vue.js Demo"
}
},
methods:{
changeTitle() {
this.$emit("titleChanged","子向父组件传值");//自定义事件 传递值“子向父组件传值”
}
}
}
parent.vue
<template>
<child v-on:titleChanged="updateTitle" ></child>
//在子组件调用处,绑定事件名要和子组件$emit的事件名保持一致。
</template>
export default {
data() {
return {
title:""
}
},
methods:{
updateTitle(e) {
this.title=e;//声明函数并赋值
}
}
}
(3).兄弟间传值
兄弟间传值 通过一个vue实例,用$emit和$on实现
var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});
注:其实组件间传值还可以用vuex状态管理,祖孙级别的还可以用provide/inject
2.vuex是什么
Vuex实现了一个单向数据流,是全局的状态管理。
state:页面状态管理容器对象。集中存储Vue components中data对象的零散数据,全局唯一,以进行统一的状态管理。页面显示所需的数据从该对象中进行读取,利用Vue的细粒度数据响应机制来进行高效的状态更新。
actions:操作行为处理模块,由组件中的 $store.dispatch('action 名称',data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作,支持多个同名方法,按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行,包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装,以支持action的链式触发。
mutations:状态改变操作方法,由actions中的 commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作,且方法名只能全局唯一。
getters:state对象读取方法。Vue Components通过该方法读取全局state对象。
3.v-model双向数据绑定原理
v-model本质上是 :value和v-on的结合体,就是绑定他的value,通过v-on触发,从而更新数据。双向绑定得的实现主要依Object.defineProperty(),通过这个函数可以监听到get,set事件。其中observer是最主要的部分,用Object.defineProperty来实现数据的劫持,然后用他的set,get方法来通知订阅者,触发update方法,从而实现更新视图
4.vue的生命周期
- beforeCreate()实例初始化之后,组件被创建时期,这个时候的 el,data,message 都是 underfined
- created()实例创建完成后,data、methods 被初始化
- beforeMount()挂载初始之前,完成 el 初始化,render 被初次调用
- mounted()完成挂载
- beforeUpdate() 挂载完成之前访问现有 DOM ,比如手动移除已添加的事件监听器;也可以进一步修改数据
- updated()由于数据更改,重新渲染界面时调用
- beforeDestroy()实例销毁之前调用
- destroyed()实例销毁后调有。调用后,所有东西都会被解绑,所有的事件监听器会被移动,子实例也会被销毁
5.vue的虚拟DOM
Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树,用对象属性来描述节点,实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。
6.diff算法
用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中
当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
把所记录的差异应用到所构建的真正的DOM树上,视图就更新了
7.vue-loader是什么?使用它的用途有哪些?
vue文件的一个加载器,将template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade等
8.为什么使用key值
需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。