前端工程师7.0

虚拟DOM和真实DOM的区别

1.vue框架

		可以使用v-model实现双向数据绑定
		借鉴mvvm模式 
		生态圈广泛 适合初学者
		前端三大主流框架 

2.生命周期

		beforeCreate()
			实例初始化之前 初始了一些事件和默认生命周期
		created()
			实例初始化完毕 可以访问data中数据和methods方法 最早可以在发送异步请求有
		beforeMount()
			完成编译模板 实例挂载到页面之前
			el template vnode  render(){}  $el  
		mouted()
			实例挂载到页面上 此时可以访问真实dom
		beforeUpdate()
			数据更新前 会触发的钩子 找到数据对应的视图打补丁
		updated()
			数据更新完成 渲染到页面的数据是最新的
		beforeDedtory()
			实例销毁前 此时可访问vue实例data和methods
		destoryed()
			实例销毁完成 销毁一些子组件 事件监听

3.mvvm模式

三层解构
		m model数据层 数据层发生变化 vm(DOM Listeners)监听到 通知view层做出对应的修改
		v	view 视图层 视图层发生变化 vm(Data Bindings)监听到 通知model层做出对应的修改
		vm viewModel 数据视图层

4.模板语法

		1.文本插值 {{js表达式}}
		2.v-bind : 绑定变量
		3.v-html 解析代码片段 <p>这是一段文本</p>
		4.v-on/@ 绑定事件 
		5.{{js表达式}}

5.列表渲染

		v-for='(item,index) in arrs' :key='item.id'
		v-for='(value,key,index) in obj'
		*key的作用:因为vue是会高效的复用组件 如果不希望组件被复用
		可以使用唯一标识key来标识当前组件

6.条件渲染

v-if v-else-if v-else v-show
		1.v-if惰性的 不满足条件直接不渲染当前元素 
		2.v-if满足条件 会给html添加一个dom节点 
		3.v-show 无论满不满足条件 都渲染当前元素
		 满足条件 会显示dom元素
		不满足条件 切换css属性display为none  隐藏元素

7.v-for 和 v-if优先级

v2:v-for 优先级 高于 v-if 
v3:v-for 优先级低于 v-if

8.data为什么是一个函数不是一个对象?

		因为组件会被高效复用,每一个组件都应该输出一份独立的拷贝,
		应该维护各自的data.
		如果是一个对象,每一个组件都指向data的同一个引用地址,
		其中一个更改，另外两个会受到影响.

9.动态style绑定

<div :style='[styleObj1,styleObj2]'></div>
		data(){
			styleObj1:{
				color:"red",
				fontSize:"18px"
			},
			styleObj2:{
				color:"red",
				fontSize:"18px"
			}
		}

10.动态类名绑定 class css样式切换
red{}
color:{}

3.watch computed区别?

		1.watch无缓存,只有值发生变化时候watch才会执行/响应
		2.一般执行开销较大异步请求 
		$route.query:{
			this.id=this.$route.query.id;
			this.load()
		}
		params:{
			handler(n,o){
				this.load()
			},
			deep:true
		}
		浅监听
			基本数据类型
			a(n,o){} 
			a:{
				handler(n,o){}
			}
		深监听
			a:{
				handler(n,o){},
				deep:true,
				immediate:true //立即执行
			}
		computed	
		1.有缓存性,值不发生改变的时候会在第一次调用的时候缓存下来	
		2.计算某一个属性的变化,只要其中的一个变量改变计算属性就会重新计算并返回计算后的结果
		computed:{
			total(){
				return this.a+this.b
			}
		}
		methods
		1.无缓存 调用一次执行一次
		2.封装异步请求 返回函数

组件机制

1.全局注册组件
		Vue.component(tagName,组件配置对象)

2.局部注册组件
		new Vue({
			components:{
				'my-a':myA,
				'my-b':myB,
			}
		})
	使用
		<my-a/>

组件传值/通信/交互

1.父--->子 
		1.使用子组件的标签上写入传递的数据
		2.在子组件内部使用props接收
		
2.子--->父
		1.子组件发射自定义事件
			$emit(自定义事件名称,传递的参数)
		2.父组件声明自定义事件 
			@my-event='handler'
			handler(a){

			}
3.兄弟组件传值
		1.利用事件总线 Vue.prototype.$emit()/$on()
			定义一个js文件 
			导出一个new Vue();
		2.在兄弟组件引入事件总线
			import Bus from './xxx.js';
			Bus.$emit('toMyb',this.msg)
		3.在另一个兄弟组件内部引入事件总线
			Bus.$on('toMyb',a)

利用vuex传值

1.定义一个vuex状态机/仓库
		export default {
			state:{
				a,
				b,
				c,
				user:""
			},
			getters:{},
			mutations:{
				SET_USER(state,payload){
					state.user=payload
				}
			},
			actions:{
				login(sto,payload){
					sto.commit('SET_USER',payload)
				}
			},
			modules:{}
		}

2.在兄弟组件分发动作/提交突变
			此时state被修改掉了
			this.$store.dispatch('login','admin1')
3.在另一个兄弟组件使用辅助函数引入state
			...mapState('',['user']);

使用vuex刷新页面数据丢失问题怎么处理?

想永久化存储
使用localStorage

祖先给子孙传值

1.在祖先组件使用provide函数返回一个对象 传递值
			provide(){
				return {
					"msg":this.msg
				}
			}
2.在子组件/孙组件使用inject注入数据
			inject:['msg','a','b']

插槽
父组件提供给子组件一个模板 想要在子组件显示模板

<my-a>
			<template>hello vue</template>
			<template v-slot:header>头部</template>
			<template #header>头部</template>
			<template>中间</template>
			<template>底部</template>
		</my-a>

1.默认插槽/简单插槽

<slot></slot>

2.具名插槽

<slot name='header'></slot>
				<slot name='center'></slot>
				<slot name='footer'></slot>

3.作用域插槽

<template slot-scope='scope'>
			{{scope.row.name}}
		</template>
		let mya={
			props:['arr','arr2']
			template:`
				<div>
					<ul>
						<li v-for='item in arr'>
							<slot v-bind:row='item'></slot>
						</li>
					</ul>
				</div>
			`
		}

2.自定义指令 v-focus

Vue.redirect('focus',{
					inserted(el){
						el--指向当前绑定指令dom元素
						el.focus()
					},
					//给指令初始化触发
					bind(vnode,el,binding){
						el.value=binding.value
					}
				})		
				new Vue({
					directives:{
						'focus':{
							inserted(){},
							bind()
						},
						'my-show':{
							inserted(){},
							bind()
						}
					}
				})

3.render函数

编译模板函数
			render(h){
				h--->createElement();
				return h('div',{},节点内容);
			}

4.过滤器

对时间格式或者文本格式处理
	{{time | fmtDate}}
	Vue.filter('fmtDate',function(val){
		return moment(val).format('YYYY-MM-DD')
	});
	new Vue({
		filters:{
			fmtTime(val){
				return val.toUpperCase()
			},
			fmtData(){

			}
		}
	})

5.插件

将vue功能进行全局拓展
let myPlugin={
	install(Vue,options){
		Vue.filter();
		Vue.directive();
		Vue.component();
		Vue.prototype.$message=function(){}
	}
};
Vue.use(myPlugin);
Vue.use(vueRouter);//
Vue.use(vuex);
cnpm i -S vuex

6.混入对象
组件的实例的公共方法 公共属性

```javascript
let mixin={
					data(){
						state:"公共数据"
					},
					methods:{
						foo(){
							return this.state
						}
					},
					created(){

					}
				}

1.全局混入
				Vue.mixin(mixin) 会给每一个组件实例都混入
2.局部混入
				new Vue({
					mixins:[mixin]
				});
				

混入规则:
选项重名会进行适当合并
data(){} 合并 冲突 以组件优先
methods:{} 合并 冲突 以组件优先
created(){} 合并 先执行混入钩子 再执行组件钩子

7.动态组件

			可以使用component is 属性动态加载组件
			切换/动态加载组件 组件会重新创建和销毁
			可以使用keep-alive在组件第一次创建的时候缓存下来
			keep-alive生命周期 
			activated() 激活/进入组件 deactivated()停用/离开组件
			errorCaptured() 子孙组件发生错误捕获