前端容易错的题3

vue常用的修饰符?

.stop: 等同于JavaScript中的event.stopPropagation(),防止事件冒泡;
.prevent: 等同于JavaScript中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);
.capture: 与事件冒泡的方向相反,事件捕获由外到内;
.self: 只会触发自己范围内的事件,不包含子元素;
**.once:**只会触发一次。

vue更新数组时触发视图更新的方法?

push();pop();shift();unshift();splice();sort();reverse()

vue的路由模式及区别?

hash模式在浏览器中符号"#",#以及#后面的字符称之为hash,用window.location.hash读取;

特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。

history模式:history采用HTML5的新特性;

提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。history 模式下,前端的 URL必须和实际向后端发起请求的URL一致,否则会报404错误

vuex的使用?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,具体包括:

1)state:Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据。

2)getter:state的计算属性,类似vue的计算属性,主要用来过滤一些数据。

3)action:actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。可以异步函数调用

4)mutation:mutations定义的方法动态修改Vuex 的 store 中的状态或数据

5)modules:项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

vue中template编译的理解?

答:就是先转化成AST树,再得到的render函数返回VNode(Vue的虚拟DOM节点),具体为:

首先,通过compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的抽象语法结构的树状表现形式),compile是createCompiler的返回值,createCompiler是用以创建编译器的。

另外compile还负责合并option。

然后,AST会经过generate(将AST语法树转化成render funtion字符串的过程)得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点,里面有(标签名、子节点、文本等等)

computed和watch的用法和区别?

computed

1)变量不在 data中定义,而是定义在computed中,写法跟写方法一样,有返回值。函数名直接在页面模板中渲染,不加小括号 。

2)根据传入的变量的变化 进行结果的更新。

3)计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化,它调用的就是上一次计算缓存的数据,因此提高了程序的性能。而methods中每调用一次就会重新计算一次,为了进行不必要的资源消耗,选择用计算属性。

watch

1)计算属性的时候 初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。

2)当有一些数据需要随着其它数据变动而变动时,或者当需要在数据变化时执行异步或开销较大的操作时,使用 watch。

总结:

1)计算属性变量在computed中定义,属性监听在data中定义。

2)计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数。

相关推荐
boooooooom4 分钟前
Vue3 provide/inject 跨层级通信:最佳实践与避坑指南
前端·vue.js
一颗烂土豆4 分钟前
Vue 3 + Three.js 打造轻量级 3D 图表库 —— chart3
前端·vue.js·数据可视化
青莲8435 分钟前
Android 动画机制完整详解
android·前端·面试
iReachers8 分钟前
HTML打包APK(安卓APP)中下载功能常见问题和详细介绍
前端·javascript·html·html打包apk·网页打包app·下载功能
颜酱9 分钟前
前端算法必备:双指针从入门到很熟练(快慢指针+相向指针+滑动窗口)
前端·后端·算法
lichenyang45310 分钟前
从零开始:使用 Docker 部署 React 前端项目完整实战
前端
明月_清风12 分钟前
【开源项目推荐】Biome:让前端代码质量工具链快到飞起来
前端
愈努力俞幸运12 分钟前
vue3 demo教程(Vue Devtools)
前端·javascript·vue.js
持续前行13 分钟前
在 Vue3 中使用 LogicFlow 更新节点名称
前端·javascript·vue.js
Anita_Sun13 分钟前
Underscore.js 整体设计思路与架构分析
前端·javascript