1. v-for 与v-if的优先级

1. 显然v-for优先于v-i被解析(源码说的清楚)
2. 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
3. 要避免出现这种情况，则在外层嵌套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延迟的问题

1. 下载
   npm install fastclick
2. 引入
   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中的数据,监听路由变化,我的变化影响别人(主动) 可以得到新的值和旧的值