vue重要知识点

1 基础部分

1.1 v-if与v-show的区别

• v-if隐藏式隐藏节点，v-show隐藏式css display：none
• 频繁切换显示与隐藏建议使用v-show，次数少建议使用v-if

1.2 watch与computed的区别

• watch监听数据变化，computed从现有的数据计算新的数据
• watch没有缓存，而computed有缓存
• watc不能异步，而computed可以异步
• watch是一对多的关系，而computed是多对一关系

1.3 watch的深度监听

• handler 还有一个deep的参数实现深度监听
• watch引用类型没有oldval参数

1.4 v-for循环

• key的作用：
  - 是vue需要dom进行patch（比较差异）重要标识，使用唯一的key值能有效的优化vue dom模板渲染
  - key建议使用数据唯一注意id docid
  避免使用index与随机

1.5 事件

• vue事件是原生js事件被挂载到当前元素
  stop
  once
  prevent

• 事件修饰符
  .up
  .enter
  .esc
  .space

• vue事件是原生js事件被挂载到当前元素
  stop
  once

• 按键修饰符
  .left.right.bottom.top

1.6 组件传参

• props 父传子
• $emit 子传父
• bus=new Vue()
  1. this.$on(name,e=>)2.this.$emit(name,data)
  3. this.$off(name)

1.7 生命周期顺序

• 创建：创建从外到内，从内到外
  1. parent beforeCreated
  2. son beforecreated
  3. son mourited
  4. parent mounted
• 更新：从外到内，从内到外
  1. son beforeupdiate
  2. son updated
  3. parent updated

2 高级部分

2.1 $set(name,index,value)

• 更新name数据的index项，并且强制更新视图

2.2 $nextTick dom

• 节点渲染完毕的回调,如果获取到更新数据可以使用，this.$nextTick (()=>{})

2.3 <component :is="currentView"></component>动态组件

2.4 混合 mixins

• 把多个组件公用的逻辑和数据抽离出来
• mixins：{xxx，yyy}

2.5 组件实现v-model

• 语法糖，简写形式
• 实现数据的双向绑定
• modal：{props：“value”，event：“input”}

2.6 .sync

• 子组件与赋值数据的双向绑定的简写
• ：visible.sync=“xxx”
• 是一个简写
  - ：visible
  - @update：visible 简写
• 要求子组件在更新数据必须 $emit(“update”:visible,value)

3 高级s

3.1 vue的模板template会编译成什么？

答案: Vue的模板实际上被编译成了render渲染函数，渲染函数执行并会返回虚拟dom节点。

3.2 请用js对象形式描述段html标签（js模拟dom节点,虚拟dom)

<p id="best"><a>内容</a><span>行内</span><p>

3.3 虚拟dom描述(createElement函数)

1.标签名tag
2.属性attrs/propertys
3.子节点children

<p id="best"><a>内容</a><span>行内</span><p>

{
tag:"p"",
propertys:{
id:"best"
}
chilren[
{tag:"a",children:["内容"]}，
{tag:"span",children:["行内"]}
]
}

3.4 render

• webpack vue-template-compiler
  把模板转换为渲染函数

• createElement（创造一个虚拟dom节点）
  - 标签名
  - 属性
  - 子节点，值
  - 直接支持jsx语法

• 作用：动态创建组件，生成模板

<template>
   <div>
   	<h1>render函数</h1>
   	<!-- <heading :level="num">abc</heading>
   <heading :level="num+2">我喜欢你</heading>
    -->
    <child-a :level="num">
   	 <p>你好1</p>
    </child-a>
    <child-a :level="num+2">
    		 你好2
    </child-a>
    
   	<button @click="num++">{
  { num }}</button>
   	
   	
   	<br/>
   	
   	
   	<child-b></child-b>
   	
   	<child-c></child-c>
   </div>
</template>

<script>
// 创建一个组件，根据他的属性props  level来决定组件的标签

import Vue from 'vue';
// Vue.component("heading",{
// 	props:{level:{
// 		type:Number,
// 		default:1,
// 	}},
// 	render(createElement){
// 		return createElement("h"+this.level,this.$slots.default)
// 		// createElement 创建一个节点（标签名，节点内容）

// 	}
// })

const childA = {
   props: {
   	level: {
   		type: Number,
   		default: 1
   	}
   },
   render(createElement) {
   	var vnode=createElement("h"+this.level,this.$slots.default);
   	console.log(typeof vnode ,vnode)
   	return vnode;
   	
   }
};

const childB= {
   
   render(createElement) {
   	
   	return createElement("a",{
   		class:{
   			'red':true,
   			'bold':true
   		},
   		attrs:{
   			id:"baidu",
   		    href:"http://www.baidu.com",
   			
   		}
   	},[
   		createElement("span","百度"),
   		createElement("em","baidu")
   		
   		
   		
   	]);
   	
   }
};

const childC= {
   
   props: {
   	num: {
   		type: Number,
   		default: 1
   	}
   },
   render(createElement) {
   	
   	return (
   	
   	<div>
   	<button onClick={()=>this.val++}>+</button>
   	<input type="text" value={this.val}/>
   	</div>)
   	
   },
   data(){
   	return{val:1}
   }
   
   
};


export default {
   components: {
   	childA,childB,childC
   },
   data() {
   	return { num: 1 };
   }
};
</script>

<style>
   .red{
   	color: red;
   }
   .bold{
   	font-weight: bolder;
   }
</style>

3.5 7.说一说你对vue拟dom的理解

1.vdom本质就是通过js去模拟dom节点，优化到dom渲染与操作
2.通过diff算法，来查看现有dom节点与最新的dom节点有哪些差异
3.通过patch方法对差异实现最小化更新渲染
diff
1.只比较同级的节点
2.如果标签不同就删除
3.如果标签相同，key相同就保持不变

转载：https://blog.csdn.net/qq_40994735/article/details/108797744