6.v-for的扩展

为什么避免v-for和v-if在一起使用?

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.

v-for 循环为什么一定要绑定key ?

1.vue在渲染的时候,会 先把 新DOM 与 旧DOM 进行对比， 如果dom结构一致，则vue会复用旧的dom。（此时可能造成数据渲染异常）

2.使用key可以给dom添加一个标识符，让vue强制更新dom。比如有一个列表 li1 到 li4，我们需要在中间插入一个li3，li1 和 li2 不会重新渲染，而 li3、li4、li5 都会重新渲染

为什么不建议用index索引作为key?使用index 作为 key和没写基本上没区别，因为不管数组的顺序怎么颠倒，index 都是 0, 1, 2…这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作。

7.v-model原理

动态绑定了 input 的 value 指向了 msg 变量，并且在触发 input 事件的时候去动态把 msg设置为目标值：

!DOCTYPE html>
    
html>
    
head>
    
    meta charset="UTF-8">
    
    title>
    Title/title>
    
    script src="../vue.js">
    /script>
    
/head>
    
body>
    
div id="app">
    
    input type="text" :value="msg" @input="vauleChange">
    
    p>
{
{
msg}
}
    /p>
    
/div>
    
script>

    new Vue({

        el:"#app",
        data:{

            msg:'Hello Vue'
        }
,
        methods:{

            vauleChange(event){
    
                this.msg = event.target.value;

            }

        }

    }
    )
/script>
    
/body>
    
/html>
    

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。
• 
  

注意:对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。

8.计算属性computed 和watch 的区别是什么？

Computed：

如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用computed。

它支持缓存，只有依赖的数据发生了变化，才会重新计算

不支持异步，当Computed中有异步操作时，无法监听数据的变化

如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值；在computed中，属性有一个get方法和一个set方法，当数据发生变化时，会调用set方法

template>
    
  div>
    
    p>
{
{
 fullName }
}
    /p>
    
  /div>
    
/template>
    

script>

export default {

  data() {

    return {

      firstName: 'Yi',
      lastName: 'Fan',
    }
    ;

  }
,
  computed: {

    fullName() {
    
      return this.firstName + this.lastName;

    }
,
  }
,
}
    ;
    
/script>
    

Watch：

监听某个值是否发生变化。监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值。

• 它不支持缓存，数据变化时，它就会触发相应的操作
  
• 支持异步监听

监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个的参数：

immediate：组件加载立即触发回调函数

deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。

当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch

template>
    
div>
    
  div>
    input type="text" v-model="num">
    /div>
    
  div>
{
{
obj}
}
    /div>
    
  div @click="obj.per.name+=1">
    更改属性/div>
    
/div>
    
/template>
    
 
script>

export default {

  watch:{

    num(newValue,oldValue){

      console.log(`num的值发生变化了新值${
newValue}
旧值${
oldValue}
    `);

    }
,
    obj:{

      handler(newValue,oldValue){

      console.log(`num的值发生变化了新值${
newValue}
旧值${
oldValue}
    `);

    }
,
    deep:true,
    immediate:true
    }

  }
,
  data(){

    return {

      num:444,
      obj:{

        per:{

          name:'YiFan'
        }

      }

    }

  }

}
    
/script>
    

9.常见组件传值

父组件 → 子组件

props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。

props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。

props属性名规则：若在props中使用驼峰形式，模板中需要使用短横线的形式

!DOCTYPE html>
    
html>
    
head>
    
    meta charset="UTF-8">
    
    meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    title>
    父子组件通信/title>
    
    link rel="stylesheet" href="../bootstrap.min.css">
    
    script src="../vue.js">
    /script>
    
/head>
    
body>
    
    div id="app">
    
        my-btn msg="hellobtn1" :title="title">
    /my-btn>
    
    /div>
    
    script>

        Vue.component('my-btn',{
    
            template:`button class='btn btn-info' @click='handlerClick'>
按钮{
{
count}
}
 {
{
msg}
}
 {
{
title}
}
    
                        my-son :total="count">
    /my-son>
    
                        /button>
`,
            data(){

                return {
count:10}

            }
,
            // 接受父组件传递过来的数据
            props:['msg','title'],
            methods:{

                handlerClick(){

                    this.count++
                }

            }
,
            components:{

                'my-son':{
    
                    template:"b>
    加粗 my-btn==>
{
{
total}
}
    /b>
",
                    // 接受父组件传递过来的数据
                    props: ['total'],
                }

            }

        }
)
        new Vue({

            el:'#app',
            data:{

              // 父组件要传递的数据
                title:"动态props"
            }

        }
    )
    /script>
    
/body>
    
/html>
    

子组件 → 父组件

$emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接收参数。个人总结一个比较好理解的

1. 功能主要方法在父组件里。
2. 在父组件里添加自定义事件，事件触发执行主要方法。
3. 在子组件里写一个通知方法( this.$emit(‘自定义事件’，参数) )用来告诉父组件执行自定义事件。
4. 在需要触发这个事件的元素上添加触发事件（例：@click=“子组件里的通知方法”）

div id="app">
    
    p>
父级total:{
{
total}
}
    /p>
    
    hr>
    
    count @increments="incrementTotal">
    /count>
    
/div>
    
template id="counter">
    
    div>
    
        button @click="increment">
子级：{
{
counter}
}
    /button>
    
    /div>
    
/template>

Vue.component('count',{

    "template":"#counter",
    "data":function(){

        return {
counter:0}

    }
,
    "methods":{

    // 点击按钮触发子组件的increment方法，再通过this.$emit("increments")告诉父组件执行increments方法
        increment:function(){
    
            this.counter += 1;

            this.$emit("increments")
        }

    }

}
)
new Vue({

    'el':"#app",
    "data":{

        total:0
    }
,
    "methods":{

    // 收到子组件emit的通知，执行该方法
        'incrementTotal':function(){
    
            this.total+=2;

        }

    }

}
    )

ref / refs

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据， 我们看一个ref 来访问组件的例子:

// 子组件 A.vue
export default {

  data () {

    return {

      name: 'Vue.js'
    }

  }
,
  methods: {

    sayHello () {

      console.log('hello')
    }

  }

}
    

// 父组件 app.vue
template>
    
  component-a ref="comA">
    /component-a>
    
/template>
    
script>

  export default {

    mounted () {
    
      const comA = this.$refs.comA;
    
      console.log(comA.name);
      // Vue.js
      comA.sayHello();
  // hello
    }

  }
    
/script>
    

eventBus

eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。

eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

template>
    
  div>
    
    show-num-com>
    /show-num-com>
    
    addition-num-com>
    /addition-num-com>
    
  /div>
    
/template>
    
 
script>

import showNumCom from './showNum.vue'
import additionNumCom from './additionNum.vue'
export default {

  components: {
 showNumCom, additionNumCom }

}
    
/script>
    

// addtionNum.vue 中发送事件
 
template>
    
  div>
    
    button @click="additionHandle">
    +加法器/button>
        
  /div>
    
/template>
    
 
script>

import {
EventBus}
 from './event-bus.js'
console.log(EventBus)
export default {

  data(){

    return{

      num:1
    }

  }
,
 
  methods:{

    additionHandle(){

      EventBus.$emit('addition', {

        num:this.num++
      }
)
    }

  }

}
    
/script>
    

// showNum.vue 中接收事件
template>
    
  div>
计算和: {
{
count}
}
    /div>
    
/template>
    
 
script>

import {
 EventBus }
 from './event-bus.js'
export default {

  data() {

    return {

      count: 0
    }

  }
,
 
  mounted() {
    
    EventBus.$on('addition', param =>
 {
    
      this.count = this.count + param.num;

    }
)
  }

}
    
/script>
    

拓展：

如何理解 Vue 的单向数据流？

数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解；注意：在子组件直接用 v-model 绑定父组件传过来的 prop 这样是不规范的写法 开发环境会报警告；

如果实在要改变父组件的 prop 值 可以再 data 里面定义一个变量 并用 prop 的值初始化它 之后用 $emit 通知父组件去修改。

10.vue-router 路由钩子函数是什么？ 执行顺序是什么？

钩子函数种类有:全局守卫、路由守卫、组件守卫

完整的导航解析流程：

1 导航被触发。

2.在失活的组件里调用 beforeRouteLeave 守卫。

3.调用全局的 beforeEach 守卫。

4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5.在路由配置里调用 beforeEnter。

6.解析异步路由组件。

7.在被激活的组件里调用 beforeRouteEnter。

8.调用全局的 beforeResolve 守卫 (2.5+)。

9.导航被确认。

10.调用全局的 afterEach 钩子。

11.触发 DOM 更新。

12.调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

11.谈一下对 vuex 的个人理解

vuex 是专门为 vue 提供的全局状态管理系统，用于多个组件中数据共享、数据缓存等。（无法持久化、内部核心原理是通过创造一个全局实例 new Vue）

主要包括以下几个模块：

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部> 计算属性。

Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。

Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

拓展： Vuex 页面刷新数据丢失怎么解决？

需要做 vuex 数据持久化 一般使用本地存储的方案来保存数据 可以自己设计存储方案 也可以使用第三方插件；

推荐使用 vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。

12.Vue.mixin 的使用场景和原理

在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立，可以通过 Vue 的 mixin 功能抽离公共的业务逻辑，原理类似“对象的继承”，当组件初始化时会调用 mergeOptions 方法进行合并，采用策略模式针对不同的属性进行合并。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

export default function initMixin(Vue){

  Vue.mixin = function (mixin) {

    //   合并对象
      this.options=mergeOptions(this.options,mixin)
  }
    ;

}

}
    ;
    

// src/util/index.js
// 定义生命周期
export const LIFECYCLE_HOOKS = [
  "beforeCreate",
  "created",
  "beforeMount",
  "mounted",
  "beforeUpdate",
  "updated",
  "beforeDestroy",
  "destroyed",
];


// 合并策略
const strats = {
}
    ;

// mixin核心方法
export function mergeOptions(parent, child) {

  const options = {
}
    ;

  // 遍历父亲
  for (let k in parent) {
    
    mergeFiled(k);

  }

  // 父亲没有 儿子有
  for (let k in child) {

    if (!parent.hasOwnProperty(k)) {
    
      mergeFiled(k);

    }

  }


  //真正合并字段方法
  function mergeFiled(k) {

    if (strats[k]) {
    
      options[k] = strats[k](parent[k], child[k] "k] = strats[k");

    }
 else {
    
      // 默认策略
      options[k] = child[k] ? child[k] : parent[k];

    }

  }
    
  return options;

}
    

13.nextTick 使用场景和原理

nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法

相关代码如下

let callbacks = [];
    
let pending = false;

function flushCallbacks() {
    
  pending = false;
     //把标志还原为false
  // 依次执行回调
  for (let i = 0;
     i  callbacks.length;
 i++) {
    
    callbacks[i]( "i");

  }

}
    
let timerFunc;
 //定义异步方法  采用优雅降级
if (typeof Promise !== "undefined") {
    
  // 如果支持promise
  const p = Promise.resolve();
    
  timerFunc = () =>
 {
    
    p.then(flushCallbacks);

  }
    ;

}
 else if (typeof MutationObserver !== "undefined") {
    
  // MutationObserver 主要是监听dom变化 也是一个异步方法
  let counter = 1;
    
  const observer = new MutationObserver(flushCallbacks);
    
  const textNode = document.createTextNode(String(counter));

  observer.observe(textNode, {

    characterData: true,
  }
    );
    
  timerFunc = () =>
 {
    
    counter = (counter + 1) % 2;
    
    textNode.data = String(counter);

  }
    ;

}
 else if (typeof setImmediate !== "undefined") {
    
  // 如果前面都不支持 判断setImmediate
  timerFunc = () =>
 {
    
    setImmediate(flushCallbacks);

  }
    ;

}
 else {
    
  // 最后降级采用setTimeout
  timerFunc = () =>
 {
    
    setTimeout(flushCallbacks, 0);

  }
    ;

}


export function nextTick(cb) {
    
  // 除了渲染watcher  还有用户自己手动调用的nextTick 一起被收集到数组
  callbacks.push(cb);

  if (!pending) {
    
    // 如果多次调用nextTick  只会执行一次异步 等异步队列清空之后再把标志变为false
    pending = true;
    
    timerFunc();

  }

}
    

14.keep-alive 使用场景和原理

keep-alive 是 Vue 内置的一个组件，可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

常用的两个属性 include/exclude，允许组件有条件的进行缓存。

两个生命周期 activated/deactivated，用来得知当前组件是否处于活跃状态。

keep-alive 的中还运用了 LRU(最近最少使用) 算法，选择最近最久未使用的组件予以淘汰。

export default {

  name: "keep-alive",
  abstract: true, //抽象组件

  props: {

    include: patternTypes, //要缓存的组件
    exclude: patternTypes, //要排除的组件
    max: [String, Number], //最大缓存数
  }
,

  created() {
    
    this.cache = Object.create(null);
 //缓存对象  {
a:vNode,b:vNode}
    
    this.keys = [];
 //缓存组件的key集合 [a,b]
  }
,

  destroyed() {

    for (const key in this.cache) {
    
      pruneCacheEntry(this.cache, key, this.keys);

    }

  }
,

  mounted() {
    
    //动态监听include  exclude
    this.$watch("include", (val) =>
 {
    
      pruneCache(this, (name) =>
     matches(val, name));

    }
    );
    
    this.$watch("exclude", (val) =>
 {
    
      pruneCache(this, (name) =>
     !matches(val, name));

    }
    );

  }
,

  render() {
    
    const slot = this.$slots.default;
     //获取包裹的插槽默认值
    const vnode: VNode = getFirstComponentChild(slot);
     //获取第一个子组件
    const componentOptions: ?VNodeComponentOptions =
      vnode &
    &
     vnode.componentOptions;

    if (componentOptions) {
    
      // check pattern
      const name: ?string = getComponentName(componentOptions);

      const {
 include, exclude }
     = this;
    
      // 不走缓存
      if (
        // not included  不包含
        (include &
    &
     (!name || !matches(include, name))) ||
        // excluded  排除里面
        (exclude &
    &
     name &
    &
 matches(exclude, name))
      ) {
    
        //返回虚拟节点
        return vnode;

      }


      const {
 cache, keys }
     = this;

      const key: ?string =
        vnode.key == null
          ? // same constructor may get registered as different local components
            // so cid alone is not enough (#3269)
            componentOptions.Ctor.cid +
            (componentOptions.tag ? `::${
componentOptions.tag}
    ` : "")
          : vnode.key;

      if (cache[key]) {
    
        //通过key 找到缓存 获取实例
        vnode.componentInstance = cache[key].componentInstance;
    
        // make current key freshest
        remove(keys, key);
     //通过LRU算法把数组里面的key删掉
        keys.push(key);
 //把它放在数组末尾
      }
 else {
    
        cache[key] = vnode;
     //没找到就换存下来
        keys.push(key);
     //把它放在数组末尾
        // prune oldest entry  //如果超过最大值就把数组第0项删掉
        if (this.max &
    &
     keys.length >
 parseInt(this.max)) {
    
          pruneCacheEntry(cache, keys[0], keys, this._vnode);

        }

      }
    

      vnode.data.keepAlive = true;
 //标记虚拟节点已经被缓存
    }
    
    // 返回虚拟节点
    return vnode || (slot &
    &
     slot[0]);

  }
,
}
    ;
    

15.Vue.set 方法原理

了解 Vue 响应式原理的同学都知道在两种情况下修改数据 Vue 是不会触发视图更新的

1.在实例创建之后添加新的属性到实例上（给响应式对象新增属性）

2.直接更改数组下标来修改数组的值

Vue.set 或者说是 $set 原理如下:

因为响应式数据 我们给对象和数组本身都增加了__ob__属性，代表的是 Observer 实例。当给对象新增不存在的属性 首先会把新的属性进行响应式跟踪然后会触发对象__ob__的 dep 收集到的 watcher 去更新，当修改数组索引时我们调用数组本身的 splice 方法去更新数组

export function set(target: Array | Object, key: any, val: any): any {
    
  // 如果是数组 调用我们重写的splice方法 (这样可以更新视图)
  if (Array.isArray(target) &
    &
 isValidArrayIndex(key)) {
    
    target.length = Math.max(target.length, key);
    
    target.splice(key, 1, val);
    
    return val;

  }
    
  // 如果是对象本身的属性，则直接添加即可
  if (key in target &
    &
 !(key in Object.prototype)) {
    
    target[key] = val;
    
    return val;

  }
    
  const ob = (target: any).__ob__;


  // 如果不是响应式的也不需要将其定义成响应式属性
  if (!ob) {
    
    target[key] = val;
    
    return val;

  }
    
  // 将属性定义成响应式的
  defineReactive(ob.value, key, val);
    
  // 通知视图更新
  ob.dep.notify();
    
  return val;

}
    

后续会继续补充！！！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！