1. v-for 与v-if的优先级
- 显然v-for优先于v-i被解析(源码说的清楚)
- 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
- 要避免出现这种情况，则在外层嵌套template, 在这一层进行v-if判断, 然后在内部进行v-for循环
2. 组件之间的传值
2.1.1 父组件向子组件传值
- 1.父组件调用子组件的时候 绑定动态属性
<v-header :title="title"></v-header> - 2.在子组件有props接收父组件传递过来的数据
- 3.可以传递属性,方法,实例,在子组件中直接使用
2.1.2 子组件主动获取父组件的属性和方法
子组件直接通过this.$parent.数据``this.$parent.方法
2. 2 子组件向父组件传值
2.2.1 父组件主动获取子组件的数据和方法
- 调用子组件的时候定义一个ref
<v-header ref="header"></v-header> - 在父组件里面通过
this.$refs.header.属性 this.$refs.header.方法
2.2.2 子组件自定义事件向父组件传值
子组件:
this. $emit("自定义事件名称" ,要传的数据) ;
父组件:
<Header @childInput= ' getVal '></Header>
methods:{
getVal(msg){
/ /msg就是，
子组件传递的数据
}
}
子组件
<template>
<div>
父组件传递过来的: {
{
this.$parent.msg}}
<!-- 定义一个子组件传值的方法 -->
<input type="button" value="点击触发" @click="childClick">
</div>
</template>
<script>
export default {
props:{
msg:String
},
data () {
return {
childValue:"我是一个子组件的值"
}
},
methods: {
childClick () {
this.$emit('childClick',this.childValue)
}
}
}
</script>
父组件
<template>
<div>
我的名字是
<!-- 子组件 -->
<!-- <child :msg="name"></child> -->
<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<!-- 点击子组件按钮,将子组件的数据显示在父组件上 -->
<!-- 自定义事件的名称要与子组件$emit的一致 -->
<child @childClick="childByValue"></child>
{
{
name}}
</div>
</template>
<script>
import Child from './Child'
export default {
data() {
return {
name:"pz",
msg:"父组件数据"
}
},
components: {
child:Child
},
methods: {
childByValue(childValue) {
// childValue就是子组件传过来的值
this.name = childValue
}
}
}
</script>
2.3 兄弟组件之间的传值
（非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。）
公共bus.js
import Vue from 'vue'
export default new Vue()
组件A：
<template>
<div>
A组件:
<span>{
{
elementValue}}</span>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bug，来做为中间传达的工具
import Bus from './bus.js'
export default {
data () {
return {
elementValue: 4
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>
组件B：
<template>
<div>
B组件:
<input type="button" value="点击触发" @click="getData">
<span>{
{
name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: 0
}
},
mounted: function () {
var vm = this
// 用$on事件来接收参数
Bus.$on('val', (data) => {
console.log(data)
vm.name = data
})
},
methods: {
getData: function () {
this.name++
}
}
}
</script>
3. key的作用
作用:只要是为了更高效的更新虚拟dom
diff算法 虚拟dom
如果节点类型不同,直接干掉前面所有的节点,再创建并插入新的节点,不会再比较这个节点之后的节点
如果节点类型相同,会重新设置节点的属性,从而实现节点的更新,
使用key会给每一个节点作为一个标识,diff算法就可以正确的识别此节点,并可以找到新的位置插入节点
4. v-if v-show 区别
- v-if是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if也是惰性的:如果在初始渲染时条件为假，则什么也不做一直到条件第一次变为真时， 才会开始渲染条件块。
- 相比之下，v-show 就简单得多一-不管初始条件 是什么元素总是会被渲染，并且只是简单地基于CSS进行切换。
- 一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好;如果在运行时条件不太可能改变，则使用v-if 较好。
5. 如何让css只在当前组件中起作用
<style scope> </style>
拓展:如何改变引入第三方组件的样式???比如引入了swiper,要改变分页小圆点的样式演示用到sass的样式穿透:父元素 /deep/ 子元素
扫描二维码关注公众号，回复：
12616913 查看本文章
<style lang="sass" scope>
.swiper-pagination /deep/ .swiper-pagination-bullet-active {
background:red;
}
</style>
6. 解决移动端时间处理300ms延迟的问题
- 下载
npm install fastclick - 引入
import FastClick from ’ fastclick’
FastClick。attach ( document. body);
7. vue-loader用途
vue-loader 是文件加载器,跟template/js/style装换成js模块
用途: js可以写es6 css可以是使用less sass
8. NextTick是做什么的
说明 :
$ nextTick是在下次DOM更新循环结束之后执行延迟回调,在修改函数之后使用$nextTick,则可以在回调中获取更新后的DOM
场景 : 在视图更新之后基于新的视图进行操作
9. 为什么脚手架中的data是返回一个函数
因为JS本身的特性带来的，如果data是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将data作为一个函数返回一个对象，那么每一个实例的data属性都是独立的，不会相互影响了。
10. keep-alive的理解
定义:他是一个内置的组件,他能在组件切换过程中将转态保存在内存中,防止重复渲染dom
说明 不会在dom树中渲染
11. watch和 computed差异
- computed计算属性是有data中的已知值得到一个新的值,性能不好, 别人的变化影响自己(被动)
- watch监听data中的数据,监听路由变化,我的变化影响别人(主动) 可以得到新的值和旧的值