vue面试基础讲解

1 .Vue的创建

1.vite的创建
2.vue-cli  脚手架    npm -g @vue/cli    
3.vue  create  项目名称
4.webpack 配置   (此方法是不用脚手架,vite创建vue项目)
      01 webpack 加一些插件
      02    vue-loader 处理.vue文件
            vue-template-compiler 编译模板
            vue-hot-reload-api 处理热更新

2.v-if和v-show
  

01  v-if的隐藏是移除节点      较少使用v-if 
02  v-show通过css方式隐藏    频繁切换用v-show    

3.v-for

v-for 和v-if不建议一块用  
必须一块用可以使用computed计算代替

4.computed和watch

01
	computed
		有缓存
		多对一
		从现有数据计算出新的数据
        computed是从现有数据计算出性的数据,watch监听数据变化执行回调函数
        computed有缓存,watch没有缓存
        computed多对1(多个数据计算一个),watch一对多(监听一个变化,更新多个)

02   watch
		没有缓存
		一对多
		监听数据的变化
		watch监听引用类型，oval和nval是一个值， deep深度监听
        watch如果监听的引用类型oval与navl是一样的,需要使用deep进行深度监听
        watch监听的数据是在data中声明的,computed是在computed是在computed中声明的
  

5.computed和methods

	计算有缓存，必须return
	method 没有缓存，也不用都return
	计算出的数据 {{strList}}
	方法计算的数据 {{myList()}}

6.事件

01
	事件修饰符
.once 执行一次
.stop 阻止事件冒泡
.prevent 阻止默认事件

02
	按键修饰符
.enter
.esc
.up .down .left .right
.space
.delete

7.事件传参

1.props 父传子
	:prop{
  type:String,
  default(){ return {}}
}

2.emit 子传父
	this.$emit("事件名","事件对象")

3.$parent  父组件的实例
 $children 子组件的实例

4.$ref   获取引用对象的实例

5.provide:
inject
	父辈组件通
provide:{color:"gold"}
	子孙组件
inject:["color"]
<div>{{color}}</div>

6.event bus 事件总线
	export new Vue()
	$on("事件名",e=>{})
	$emit("事件名","事件对象")

7.vuex
	state 状态
	mutation 改变state唯一方式
	actions 异步操作
	getters 计算器
	moudule模块

8.window全局变量

9. cookie 
   localStorage
   sessiontStorage

8.生命周期

	创建前：有this，没有data和methods
	创建后：有data和methods  dom没有渲染完毕
	挂载前：有虚拟dom节点$vnode ;dom开始编译
	挂载后：dom已经编译完毕
	更新前：数据已经更新,dom没有更新
	更新后：数据与dom都更新
	销毁前：data和模板还有联系，methods也可以访问
	销毁后：data和模板就已经切断联系

9.生命周期执行顺序

1. 
   创建：创建先父后子，创建完毕先子后父
   挂载：先父后子，挂载完毕先子后父

2.
    更新：父更新不影响子组件，子组件不会影响到父组件
    监听props，更新子组件data，先子更新，在父更新，先子更新完成再父更新完毕