vue面试五之vue修饰符中 .lazy 等用法、Vue v2.4中新增的$attrs及$listeners属性的使用、v-once 的使用场景、vue组件里的定时器该如何销毁、vue海量数据优化等

vue面试五

一 vue修饰符中 .lazy .number .trim 的用法
二 Vue v2.4中新增的`$attrs`及`$listeners`属性的使用
三 v-once 的使用场景
四 vue组件里的定时器该如何销毁？
五如果有大量数据需要渲染，如何提升vue优化？
六 vue递归组件是啥，手写一个递归组件？

一 vue修饰符中 .lazy .number .trim 的用法

1 .lazy 的用法(使双向数据绑定不起作用，且失去焦点的时候，触发@change方法)

<template><div><div><input v-model="msg" @change="show"><span>{{msg}}</span></div></div>
</template><script>
export default {data () {return {msg: 123}},methods: {show () {console.log(this.msg)}}
}
</script>

v−model是双向绑定的如果这个时候，修改<input>框中的内容，<span>中内容也会修改v-model是双向绑定的如果这个时候，修改<input>框中的内容，<span>中内容也会修改v−model是双向绑定的如果这个时候，修改<input>框中的内容，<span>中内容也会修改

当使用 .lazy 时

<template><div><div><input v-model.lazy="msg" @change="show"><span>{{msg}}</span></div></div>
</template><script>
export default {data () {return {msg: 123}},methods: {show () {console.log(this.msg)}}
}
</script>

改变<input>框中的内容并不会使得<span>中的内容发生变化，此时当输入框失去焦点后触发change事件。也就是说加上.lazy后相当于双向数据绑定不起作用了改变<input>框中的内容并不会使得<span>中的内容发生变化，此时当输入框失去焦点后触发change事件。也就是说加上.lazy后相当于双向数据绑定不起作用了改变<input>框中的内容并不会使得<span>中的内容发生变化，此时当输入框失去焦点后触发change事件。也就是说加上.lazy后相当于双向数据绑定不起作用了

2 .number 修饰符可以将输入的值转化为Number类型 ( 否则虽然你输入的是数字
但它的类型其实是String ) 在数字输入框中比较有用

<template><div><p>.number修饰符</p><input type="number" v-model.number="val"><p>我的数据类型是：{{ typeof(val) }}</p></div>
</template><script>export default {data(){return{val:''}}}
</script>

3 .trim 修饰符会自动过滤掉输入的首尾空格

<template><div><p>.trim修饰符</p><input type="etxt" v-model.trim="val"><p>val的长度是：{{ val.length }}</p></div>
</template><script>export default {data(){return{val:''}}}
</script>

二 Vue v2.4中新增的`$attrs`及`$listeners`属性的使用

背景：组件之间传值

$attrs:
接收除了props声明外的子组件的所有绑定属性（class、style除外）（父组件向子组件传值）

由于child.vue 在 props 中声明了 name 属性，$attrs 中只有age、gender两个属性，输出结果为：
{ age: “20”, gender: “man” }

通过 v-bind="$attrs"，可以将属性继续向下传递，让 grandson.vue 也能访问到父组件的属性，这在传递多个属性时会显得很便捷，而不用一条条的进行绑定。
console的结果为：{ height: “180”, gender: “man” } (child.vue 在 props 中声明了 name 属性，grandson.vue在props 中有age属性)

$listeners
接收除了带有.native事件修饰符的所有事件监听器(子组件向父组件传值)

总结：在child组件上绑定$attrs 和 $listeners 使grandson组件获取parent传递的值并且可以调用在parent那里定义的方法

简单demo举例：

// 父组件
<template><div>//给子组件传递两个值<child-dom:foo="foo"     :coo="foo"></child-dom></div>
</template>
<script>import childDom from "./ChildDom.vue";export default {data() {return {foo:"Hello, world",coo:"Hello,rui"}},components:{childDom},}
</script>// 子组件
<template><div><p>foo:{{foo}}</p><p>attrs:{{$attrs}}</p>  //通过$attrs获取非props的值<childDomChild v-bind="$attrs"></childDomChild>  // 通过v-bind传递值给孙子组件</div>
</template>
<script>
import childDomChild from './childDomChild';
export default {name:'child-dom'props:["foo"],inheritAttrs:false,
}
</script>// 孙子组件
<template><div><p>coo:{{coo}}</p></div>
</template>
<script>export default {name:'childDomChild'props:["coo"],     // 获取子组件传来的值inheritAttrs:false}
</script>

// 父组件
<template><div><child-domv-on:upRocket="reciveRocket"></child-dom></div>
</template>
<script>import childDom from "@/components/ChildDom.vue";export default {name:'demoNo',data() {return {}},components:{childDom},methods:{reciveRocket(){console.log("reciveRocket success")}}
}
</script>// 子组件
<template><div><childDomChild v-on="$listeners"></childDomChild>    // 孙子组件向父组件传值，调用方法</div>
</template>
<script>
import childDomChild from './childDomChild';
export default {name:'child-dom'
}
</script>// 孙子组件
<template> <div><button @click="startUpRocket">我要发射火箭</button></div>
</template>
<script>export default {name:'childDomChild',methods:{startUpRocket(){this.$emit("upRocket");console.log("startUpRocket")}}
</script>

将这个两个demo合在一起则是：

// 父组件
<template><div>//1 父组件要给子孙组件传递的值，以及子孙组件让父组件调用的方法<child-dom:foo="foo":coo="coo"v-on:upRocket="reciveRocket"></child-dom></div>
</template>
<script>import childDom from "@/components/ChildDom.vue";export default {name:'demoNo',data() {return {foo:"Hello, world",coo:"Hello,rui"}},components:{childDom},methods:{reciveRocket(){console.log("reciveRocket success")}}
}
</script>// 子组件
<template><div><p>foo:{{foo}}</p><p>attrs:{{$attrs}}</p><childDomChild v-bind="$attrs" v-on="$listeners"></childDomChild>   // 2  v-bind绑定父组件的值，并传给孙子组件，v-on使孙子组件的值，传给父组件</div>
</template>
<script>
import childDomChild from './childDomChild';
export default {name:'child-dom'props:["foo"],inheritAttrs:false,
}
</script>// 孙子组件
<template> <div>// 3 可获取父组件的传来的值，可调用方法，使父组件方法执行<p>coo:{{coo}}</p><button @click="startUpRocket">我要发射火箭</button></div>
</template>
<script>export default {name:'childDomChild',props:['coo'],methods:{startUpRocket(){this.$emit("upRocket");console.log("startUpRocket")}}
</script>

三 v-once 的使用场景

背景：v-once的使用
没有使用v-once下的情景：

打开浏览器，并修改值的时候，mes也会跟着修改，正常，正是vue的双向绑定

当把上述代码，修改成v-once以后
打开浏览器，并修改值的时候，mes不会发生改变

v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

使用场景：

上面是种理想状态，实际开发的时候要想做到上面的理想状态，很难。
当然如果是纯粹的展示大量静态内容，可以用v-once避免重复渲染，提高效率

四 vue组件里的定时器该如何销毁？

this.$once(‘hook:beforeDestroy’,()=>{});
直接在需要定时器的方法或者生命周期函数中声明并销毁,代码如下：

export default{methods:{fun1(){const timer = setInterval(()=>{//需要做的事情console.log(11111);},1000);this.$once('hook:beforeDestroy',()=>{clearInterval(timer);timer = null;})}}
}

关于this.$once
this.$once是个事件函数，是一个用于监听自定义的函数，或者vue生命周期函数的一个函数
用法this.$once(参数1，参数2)
第一个参数即是被监听的函数(自定义函数，或者vue生命周期函数)
第二个参数就是第一个函数执行后的回调函数

五如果有大量数据需要渲染，如何提升vue优化？

优化方案：
1 按需加载局部数据, 虚拟列表，无限下拉刷新。(vue-virtual-scroll-list)

2 js运行异步处理: 分割任务，实现时间切片处理, 类似react fiber, 每次执行记录时间, 超过一定执行时间则settimeout或requestAnimation推迟到下一个时间片,一般一个时间片为16ms。

3 大量纯展示的数据,不需要追踪变化的用object.freeze冻结（可以使用虚拟列表，Object.freeze冻结对象，Object.preventExtentsion阻止对象扩展来阻止vue给每个对象加上get,set，但是缺点是不能响应了）

4 数据量大的时候，可以做分页处理。翻页一次请求10-20条数据。

补充背景：
Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。
vue1.0.18+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换。

补充背景：
vue-virtual-scroll-list官网地址 https://tangbc.github.io/vue-virtual-scroll-list/#/
https://www.npmjs.com/package/vue-virtual-scroll-list

六 vue递归组件是啥，手写一个递归组件？

递归组件，顾名思义，就是自己的内部实现又调用自己的组件。比如Vue官方给的treeView的例子，父目录下有子目录，子目录下还有子目录，子子孙孙，无穷尽也。就像俄罗斯套娃。

手写一个递归组件：

// 父组件
<template><div id="app">   <category :datalist="datalist"></category></div>
</template><script>
import category from './category.vue'
export default {name: 'app',data () {return {datalist:[{title:'手机',level:1,children:[{title:'三星',level:2,children:[  {title:'三星1',level:3}]},{title:'华为',level:2},{title:'苹果',level:2}]}   ]}},components:{category},
}
</script><style>
</style>// 子组件 （递归调用）
<template><div id="phone"><div v-for="(item ,index) in datalist" :key="index">{{item.title}}<div v-if="item.children" class="item-chilren"><phone :datalist="item.children"></phone></div></div></div>
</template><script>
export default {name: 'phone',data () {return {}},props:{datalist:Array},
}
</script><style>
.item-chilren{
}.item-chilren div{padding: 2px;padding-left: 20px;margin-bottom: 2px;
}
</style>

什么要给名字？这个名字是干什么用呢？这个名字很大的一个用处，就是为了我们使用递归组件的时候来使用。
如果一个组件要使用自己的时候，我就可以通过自己的名字来使用自己。

<phone :datalist="item.children"></phone>