vue面试(二)
2023-09-11 14:20:08 时间
vue高级特性
1. 自定义v-model; 详解;https://www.cnblogs.com/fsg6/p/14469150.html
2. this.$nextTick
vue是异步渲染,data改变后,Dom不会立刻渲染,
$nextTick会在DOM渲染之后被粗发,已获得最新的dom节点
<template> <div id="app"> <ul ref="ul1"> <li v-for="(item, index) in list" :key="index"> {{item}} </li> </ul> <button @click="addItem">添加一项</button> </div> </template> <script> export default { name: 'app', data() { return { list: ['a', 'b', 'c'] } }, methods: { addItem() { this.list.push(`${Date.now()}`) this.list.push(`${Date.now()}`) this.list.push(`${Date.now()}`) // 1. 异步渲染,$nextTick 待 DOM 渲染完再回调 // 3. 页面渲染时会将 data 的修改做整合,多次 data 修改只会渲染一次 this.$nextTick(() => { // 获取 DOM 元素 const ulElem = this.$refs.ul1 // 如果没加$nextTick,点击第一次,li的节点是3个(为何不是6个),因为dom是异步渲染,data数据改变不会立刻渲染 console.log( ulElem.childNodes.length ) }) } } } </script>
3. slot 基本使用, 作用域插槽, 具名插槽, 详情:https://www.cnblogs.com/fsg6/p/14469648.html
4.动态组件 详情:https://www.cnblogs.com/fsg6/p/14469861.html
5. 异步组件按需加载 ;详情;https://www.cnblogs.com/fsg6/p/14470002.html
6.keep-alive缓存组件; 详情;https://blog.csdn.net/weixin_41819098/article/details/89379734
https://www.cnblogs.com/mary-123/p/11248178.html
-
activated 当keepalive包含的组件再次渲染的时候触发
-
deactived 当keepalive包含的组件销毁的时候触发
keepalive可以接收三个属性作为参数进行匹配对应的组件进行缓存 -
include 包含的组件
-
exclude 排除的组件
-
max 缓存组件的最大值
其中include,exclude可以为字符,数组,以及正则表达式max类型为字符或者数字
8.
相关文章
- vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法
- Vue_(Router路由)-vue-router路由的基本用法
- 【经验总结】vue + element-ui 踩坑—— table 篇
- 面试时面试官想要听到什么答案(关于一些vue的问题)
- vue写template的4种形式
- vue 前端解决跨域问题,
- vue 自定义指令input表单的数据验证
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue] Use Vue.js Watchers to Respond to Async Updates
- standalone vue initialization process - Vue应用的初始化过程
- vue项目JS播放音频音效和背景音乐
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- Vue学习之--------多级路由的使用(2)(2022/9/5)
- Vue中组件化编码使用、实现组件之间的参数传递(实战练习二)
- Vue中vue-i18n结合vant-ui实现国际化
- Vue、Vuejs从入门到精通 | vue-router详解
- 216:vue+openlayers 加载GPX数据,导出geojson文件
- 128:vue+openlayers 绘制矩形,drawend取消绘制锚点,屏蔽双击放大事件 (示例代码)
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue(二)vue 指令及用法举例
- vue大屏项目封装echarts
- ASP.NET Core微服务(五)——【vue脚手架解析接口】
- Vue学习笔记——vue-router
- 2023前端面试重点知识点总结【详细】css+js+vue+react+小程序+性能优化等等