1.vue为什么要使用key?
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
2.vue中组件的通信
<template>
<div id="app">
<users v-bind:users="users"></users>
</div>
</template>
<script>
import Users from "./components/Users"
export default {
name: 'App',
data(){
return{
users:["Henry","Bucky","Emily"]
}
},
components:{
"users":Users
}
}
<template>
<div class="hello">
<ul>
<li v-for="user in users">{{user}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props:{
users:{
type:Array,
required:true
}
}
}
</script>
通过props实现。
- 在父组件中给子组件标签上绑定一个属性, 属性上挂载需要传递的值
- 在子组件通过props:[“自定义属性名”]来接收数据
<template>
<header>
<h1 @click="changeTitle">{{title}}</h1>
</header>
</template>
<script>
export default {
name: 'app-header',
data() {
return {
title:"Vue.js Demo"
}
},
methods:{
changeTitle() {
this.$emit("titleChanged","子向父组件传值");
}
}
}
</script>
<template>
<div id="app">
<app-header v-on:titleChanged="updateTitle" ></app-header>
<h2>{{title}}</h2>
</div>
</template>
<script>
import Header from "./components/Header"
export default {
name: 'App',
data(){
return{
title:"传递的是一个值"
}
},
methods:{
updateTitle(e){
this.title = e;
}
},
components:{
"app-header":Header,
}
}
</script>
通过$emit实现
1. 在父组件中给子组件标签绑定一个自定义事件,给这个事件挂载需要调用的方法
2. 在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法
<div id="itany">
<my-a></my-a>
<my-b></my-b>
<my-c></my-c>
</div>
<template id="a">
<div>
<h3>A组件:{{name}}</h3>
<button @click="send">将数据发送给C组件</button>
</div>
</template>
<template id="b">
<div>
<h3>B组件:{{age}}</h3>
<button @click="send">将数组发送给C组件</button>
</div>
</template>
<template id="c">
<div>
<h3>C组件:{{name}},{{age}}</h3>
</div>
</template>
<script>
var Event = new Vue();
var A = {
template: '#a',
data() {
return {
name: 'tom'
}
},
methods: {
send() {
Event.$emit('data-a', this.name);
}
}
}
var B = {
template: '#b',
data() {
return {
age: 20
}
},
methods: {
send() {
Event.$emit('data-b', this.age);
}
}
}
var C = {
template: '#c',
data() {
return {
name: '',
age: ""
}
},
mounted() {
Event.$on('data-a',name => {
this.name = name;
})
Event.$on('data-b',age => {
this.age = age;
})
}
}
var vm = new Vue({
el: '#itany',
components: {
'my-a': A,
'my-b': B,
'my-c': C
}
});
</script>
1. 通过 event bus 实现
创建一个空的vue实例eventBUS,作为公共的桥梁
在两个组件中引入创建的bus,组件A用BUS.$emit("自定义事件名",要传递的值)发送数据
组件B用BUS.$on("自定义事件名",function(v){挂载从A传过来的数据}) 来接收数据
2. 使用vuex来传递
使用mutations来操作state里的数据。随便定义一个函数,在使用的页面使用this.$store.commit("自定义函数", 要传递的数据);来调用
3.vue的双向数据绑定怎么实现的
Vue 实现 双向数据绑定主要采用:数据劫持结合“发布-订阅”模式的方式,
通过Object.defineProperty()的 set 和 get,在数据变动时发布消息给订阅者触发监听。
4.Vue渲染/更新过程
渲染过程
- 解析模板为render函数(或在开发环境已完成,vue-loader)
- 触发响应式,监听data属性getter setter
- 执行render函数,生成vnode,patch(elem,vnode)
更新过程
- 修改data,触发setter(此前在getter中已被监听)
- 重新执行render函数,生成newVnode
- patch(vnode,newVnode)