Vue总结~~持续更新

一、scoped 组件内样式局部化 和 原理

<div class="main"></div>
<style scoped>
	.main{ width:100px; }
</style>

// 加入了scoped，就会在节点上添加自定义属性 data-v-xxx
// css选择器-->根据属性选择最终添加样式  .main[data-v-xxx]
<div data-v-08277772  class="main"></div>
.main[data-v-08277772]{
	width:100px;
}

二、slot插槽

// A组件：用slot包住需要替换的内容
	<slot>
        <div>默认显示的内容</div>  // 默认显示的内容
    </slot>
// B组件: 引入A组件后，直接在A组件里直接写要替换的内容，
// 如果是<A></A>里面无内容，则显示A组件默认的内容
	<A>
        <div>替换成这个div</div>
    </A>

三、样式穿透 ::v-deep、>>>、/deep/

 通用：    		::v-deep 
 stylus： 		>>>
 sass、less：   /deep/

四、Vue生命周期

vue中每一个组件都是独立的，每一个组件都有自己的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁
vue生命周期

 面试题：打开一个组件，会执行哪些生命周期
	beforeCreate	// this.$data（无）、this.$el（无）  都是undefined（data数据 和 Dom节点）
	 created		// this.$data（有）、this.$el（无）
	 beforeMount	// this.$data（有）、this.$el（无）
	 mounted		// this.$data（有）、this.$el（有）

五、Vue双向绑定原理

发布者-订阅者模式（被观察者-观察者模式）

let obj = {}
Object.defineProperty(obj, 'names',{
	// 设置劫持
	set( val ){ 
		names = val; 
	},
	// 获取劫持
	get(){
		return names
	}
})
obj.names = 123