- v-if和v-show的比较
v-if 和 v-show的区别
1. 方式：v-show 底层原理是操作元素的display属性为none还是block，v-if 底层是操控元素的创建/销毁dom树
2. 编译过程
- v-if 切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件
- v-show 只是简单的基于 css 切换
3. 编译条件
-v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存后，然后再切换的时候进行局部卸载）
- v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留。
4. 性能消耗
v-if有更高的切换消耗，v-show有更高的初始渲染消耗
5. 使用场景
- 频繁切换使用(展示页面，类似于一些选项卡) ----> v-show
- 在运行时条件很少改变(权限校验) ----> v-if
- 生命周期函数
1. beforeCreate created (在created中首次拿到data中的数据)
2. beforeMount mounted （此时dom书渲染结束，可以访问dom结构）
3. beforeUpdate updated
4. beforeDestory destory
- 计算属性(computed)中的getter和setter
1. 为了使模版看起来更加的整洁，把过多的数据逻辑放在计算属性中
2. 计算属性缓存vs方法（可以将同一个函数定义为计算属性或者方法）
1. 计算属性是基于他们响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值，否则只会返回以前计算的结果
2.每当触发重新渲染时，调用方法将总会再次执行函数。
3. getter 当其依赖的属性的值发生变化的时，这个计算属性的值也会自动更新
4. setter 当赋值给计算属性的时候，将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候。
- Watch 监听对象
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。
1. 如果只是监听obj内的某个属性，可以直接对obj.key进行监听
2. 如果是对整个obj深层监听需要开启深层监听 deep:true
3. 当值第一被绑定的时候，并不会触发watch监听使用immediate可以在最初绑定的时候执行
- v-for 循环key的作用
1. vue在更新渲染dom的时候是根据新旧dom树进行对比，使用key来给每一个节点做唯一标识，diff算法就可以正确的识别此节点，找到正确的位置插入新节点
- 虚拟dom
1. 前端框架中 vue和react底层都使用了虚拟dom，用来高效更新页面，虚拟dom本质就是一个js对象，用来描述你希望在页面上看到的内容
2. 虚拟dom执行的过程：在初次渲染时，根据数据生成一个虚拟dom树，当数据放生变化的时候，会再生成一个虚拟dom树，利用diff算法，也就是利用tree diff、componets diff、element diff 对新旧dom进行对比，进行局部更新
- $nextTick()
1. 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM
2. 应用场景：比如在creted中数据改变后需要对dom进行操作，但是此时dom还没有挂载，此时就可以使用this.$nextTick()
-
s
e
t
(
v
m
.
set(vm.
set(vm.set===vue.set)
1. 在vue2中向数组或者对象追加一个值或者属性的时候，不是响应式的，也就是数据改变，视图不会随着改变
2. 是因为在vue2中，数据的响应式是通过object.defineProperty拦截已经存在的key进行数据读取和修改， 但是对于新追加的key是无法拦截的
3. 这个问题在vue3中已经被解决，vue3中的数据响应式是使用proxy可以读取和修改数据上的任意的key不管是已经存在还是后来追加的
- 组件之间的传值
1.父组件向子组件传值
- 父组件传值：通过属性动态绑定
- 子组件接受：通过props接受
2. 子组件向父组件传值
- 子组件传值：通过$emit触发自定义事件，利用实参的方式来传送数据
- 父组件接受：通过定义自定义事件，利用形参的方式来接受数据
3. 兄弟组件传值
- 一个兄弟：通过evntBus事件中心的$emit触发自定义事件，利用实参来传送数据
- 另一个兄弟：通过事件中心$on事件定义自定义事件，利用实参来接受数据
4. provide/inject（跨组件传值）
-允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
5. vuex 全局状态管理
6.$attrs 当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
7. $parent/$children/ref
- 什么是路由
1. 路由就是对应关系，组件和url地址，根据不同的地址显示不同的组件，路由也是实现spa单页面应用程序主要核心 后端路由：根据不同的地址请求不同的借口
2. 在vue中路由传参
1. params传参：在路由规则中传递参数，使用this.$route.params.id来接受参数 通过path来跳转
2. query传参：在跳转的时候 /home?id=10传参，使用this.$route.query.id 来接受参数 通过name来跳转
3. 路由钩子
1. 全局钩子：会对所有的路由进行拦截
beforeEach: 进入之前
afterEach：已经进入
2. 路由独享钩子：可以针对某一个路由进行拦截，这个需要写在路由规则里面 beforeEnter
3. 组件内守卫：针对组件进行拦截
beforeRouterEnter： 在渲染该组件的对应路由被 confirm 前调用
beforeRouteUpdate： 组件被复用时调用
beforeRouteLeave： 导航离开该组件的对应路由时调用
- vue-router中hash和history的区别
1. history没有#/，会比hash好看
2. history模式是采用的h5`history.pushState` API 来完成 URL 跳转而无须重新加载页面
3. hash是利用location.hash进行跳转的
4. hash是不需要后台配置支持的
5. history不过这种模式要玩好，还需要后台配置支持
- vue中route和router的区别
1. route是当前路由信息，可以获取到当前路由地址参数等等
2. router是全局路由（VueRouter）实例对象，可以通过router进行路由的跳转后退等等
- keep-alive
1. 包裹动态组件时，会缓存不活动组件实例，主要用于保存组件状态或避免重新渲染
- mounted
1. 页面元素已经挂载，可以操作dom元素
2. 操作dom的方法
- 选择器获取(id选择器、类名选择器、标签等) document.querySelector('#cvs');
- ref this.$refs.cvs;
- 什么是vuex
1. vuex 一种全局状态管理
- 在state中定义数据，在其他组件中进行获取，修改都是响应的
- 组成部分
-1. state 定义数据
-2. Mutation 修改数据
-3. action 处理异步操纵
-4. Gette 处理state中的数据
-5. module 可以将store分割成不同的模块 其中都包括 state mutation action等
- vue.extend 与vue.component的区别
1. vue.extend相当于一个扩展实例构造器，用于创建一个具有初始化选项的Vue子类，在实例化时可以进行扩展选项，最后使用$mount方法绑定在元素上。
- 使用场景
-1. 比如我们要实现一个dialog对话框组件时，可以选择将组件插入到body还是其他节点中。
2. vue.component用于全局注册组件
- 表单修饰符
1. <input v-model.number="age" type="number">
- 自动将用户的输入值转为数值类型
2. <input v-model.trim="msg">
- 自动过滤用户输入的首尾空白字符
3. <input v-model.lazy="msg" >
- 在change时而非input时更新
- 事件修饰符
1. .stop 阻止冒泡
2. .prevent 阻止默认行为
3. .once 加上此修饰符之后相应的函数只能触发一次
4. .self 当前元素自身时触发处理函数时才会触发函数
- 异步操作先执行AB再执行C
const A = async () => await 'A';
const B = async () => await 'B';
const C = () => 'C';
(async function All() {
await Promise.all([A(), B()]);
C();
})();
- axios 请求失败 ，后端接口返回的状态码以及错误信息获取
axios.get('/userInfo')
.catch(error => {
if (error.response) {
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
console.log(error.request);
} else {
console.log('Error', error.message);
}
console.log(error.config);
});
- v-on
1. v-on 可以监听多个事件，要以，隔开
- Cli3.0的相关配置
1. publicPath
- 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
2. 输出文件目录
- 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
- outputDir:"dist"
3. 放置生成的静态资源 (js、css、img、fonts) 的目录
- assetDir:"static"
4. 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
- indexPath:"index.html"
5. lintOnSave
- 是否在保存的时候使用 `eslint-loader` 进行检查
webpack的配置
6. devServer.proxy
- 如果你的前端应用和后端 API 服务器没有运行在同一个主机上
本文深入探讨v-if和v-show在Vue中的区别，涉及切换机制、编译时机、性能消耗、适用场景，以及生命周期函数、计算属性、watch、v-for、虚拟DOM、$nextTick、数据响应式、组件间通信和路由管理等内容。
扫一扫
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
