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/ 子元素
<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中的数据,监听路由变化,我的变化影响别人(主动) 可以得到新的值和旧的值
京公网安备 11010502036488号