Vue相关知识点

本节主要讲述Vue相关知识点

v-if与v-show区别?

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

附上答案

keep-alive作用?

持这些组件的状态,以避免反复重渲染导致的性能问题。

附上答案

阐述下vue双向绑定的原理?

监听用户的输入事件,事件驱动,附上答案

组件通信

1.父传子用props,父用子用ref 子调父用$emit,无关系用Bus

Vuex

组件通信库,可以避免子组件无法改变props的弊端等
mutations 同步操作, 用于改变状态 官方不推荐异步
action 执行多个mutaions,官方推荐异步操作
mapState、mapGetters、mapActions使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<el-dialog :visible.sync="show"></el-dialog>
</template>

<script>
import {mapState} from 'vuex';
export default {
computed:{

//这里的三点叫做 : 扩展运算符
...mapState({
show:state=>state.dialog.show
}),
}
}
</script>

后两者类似

VueRouter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
定义
var routes = [
{
path:"/one",

component:导入的组件1
},
{
path:"/two",
component:导入的组件2
},
];
// 定义路由组件
var router = new VueRouter({
routes
});
// 定义路由
new Vue({
el:"#box",
router
});
访问设定的路由后 会将<router-view></router-view>替换成相应的模版
html访问方式 <router-link to="/one">One</router-link>(类似a标签)
js访问方式 this.$router.push('/one');
replace方式 替换当前页面
携带的参数 可以通过this.$route.query.xxxx来获取

Vue双向绑定

原理:利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
缺点:双向数据流是自动管理状态的, 但是在实际应用中会有很多不得不手动处理状态变化的逻辑, 使得程序复杂度上升, 难以调试。

vue.cli项目中src目录每个文件夹和文件的用途

assets文件夹是放静态资源;components是放组件;router是定义路由相关的配置;view视图;app.vue是一个应用主组件;main.js是入口文件

vuex是什么?

vuex是vue生态系统中的状态管理。在main.js引入store,注入,新建一个目录store,….. export 等,常用的场景有:单页应用中,组件之间的状态,音乐播放、登录状态、加入购物车等等。

对vue生命周期的理解

ue生命周期总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。

创建前/后: 在beforeCreated阶段,vue实例的挂载元素el还没有。

载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。

更新前/后:当data变化时,会触发beforeUpdate和updated方法。

销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。