sync:中文翻譯是同步的意思
.sync是一個(gè)修飾符
他可以把子組件的值同步到父組件中
就是把子組件的值傳遞給父組件
ref傳值
== 你可以在標(biāo)簽或者組件上添加ref屬性
== 屬性值是一個(gè)字符串
== 比如: ref='hh'
== 寫了ref屬性以后，可以通過 : vm.$refs.hh 獲取當(dāng)前的標(biāo)簽或者組件
<script src="https://cn.vuejs.org/js/vue.js"></script>
<script>
// 如果new的時(shí)候，不傳入任何參數(shù)
// 表示生產(chǎn)的實(shí)例是一個(gè)vue自定義的事件對象
// 我們把他叫做中央事件總線
var bus = new Vue()
// 這個(gè)事件對象可以在任意位置監(jiān)聽事件
// 通過$on方法可以綁定事件監(jiān)聽
bus.$on('abc',function(val){
console.log(val)
})
// 可以在任意位置觸發(fā)給對象上的特定事件
// 通過$emit方法可以觸發(fā)事件
bus.$emit('abc','hello world') ?????
</script>
<div id="app">
<home></home>
<async-home></async-home>
</div>
<script src="https://cn.vuejs.org/js/vue.js"></script>
<script>
/* 同步組件 */
Vue.component('home',{
template:`<div>
<h1>HOME</h1>
</div>`
})
/* 異步組件 */
// 組件名任意，為了語義化表示是一個(gè)異步組件，以async-開頭
Vue.component('async-home',function(resolve,reject){
// vue會根據(jù)我傳入的這個(gè)函數(shù)
// 產(chǎn)生一個(gè)promise對象
setTimeout(function(){
// 要求通過resolve，把組件的配置傳入
// 他會在3秒時(shí)間到了以后，給我按照配置創(chuàng)建好組件
resolve({
template:`<h1 @click='clickHandler'>click me</h1>`,
methods:{
clickHandler(){
alert('hello vue')
}
}
})
},3000)
})
new Vue({
el:'#app'
})
// Promise語法
let p = new Promise(function(resolve,reject){
// resolve是p.then里面的函數(shù)
// reject是p.catch里面的函數(shù)
setTimeout(function(){
resolve('hello world')
},3000)
})
p.then(function(data){
console.log(data)
})
p.catch(function(){
})
</script>
動(dòng)態(tài)組件
== 通過<component>元素的is屬性可以實(shí)現(xiàn)
== 不同組件之間的切換
== 語法:
<component is="組件名稱"></component>
keep-alive
== 可以讓組件實(shí)例在第一次被創(chuàng)建的時(shí)候緩存下來
<ul id='ul'>
</ul>
<script>
+ 什么是虛擬DOM
== createElement() 產(chǎn)生的一個(gè)對象，叫做虛擬DOM
+ 什么是diff（different）算法
== 差異比較算法的一種
== 把樹形結(jié)構(gòu)按照層級分解
== 只比較同級元素
== 不同層級的節(jié)點(diǎn)只有創(chuàng)建和刪除操作
+ 虛擬DOM+diff算法的方式和傳統(tǒng)的dom操作對比，有什么好處
== 傳統(tǒng)dom操作
== 在一次操作中
== 往往會伴隨多次dom節(jié)點(diǎn)更新
== 瀏覽器收到第一個(gè)dom請求后
== 并不知道后面還有若干更新操作
== 就會馬上執(zhí)行流程
== 最終執(zhí)行若干次
== 在后續(xù)找dom坐標(biāo)的時(shí)候
== 可能因?yàn)榍捌诟耫om
== 導(dǎo)致了后續(xù)要找的dom發(fā)送了變化
== 而且頻繁操作dom還會出現(xiàn)頁面卡頓，影響用戶體驗(yàn)
== 虛擬dom+diff算法
== 若一次操作中有若干更新dom的動(dòng)作
== 虛擬dom不會立即操作dom
== 而是將若干次更新的diff內(nèi)容保存到本地的一個(gè)對象
== 最終將這個(gè)js對象一次性放到dom樹上
== 再進(jìn)行后續(xù)操作
== 避免大量無謂的計(jì)算量
for(var i=0;i<100;i++){
var li = document.createElement('li')
document.getElementById('ul').appendChild(li)
}
</script>
