sync:中文翻译是同步的意思
.sync是一个修饰符
他可以把子组件的值同步到父组件中
就是把子组件的值传递给父组件
ref传值
== 你可以在标签或者组件上添加ref属性
== 属性值是一个字符串
== 比如: ref='hh'
== 写了ref属性以后，可以通过 : vm.$refs.hh 获取当前的标签或者组件
<script src="https://cn.vuejs.org/js/vue.js"></script>
<script>
// 如果new的时候，不传入任何参数
// 表示生产的实例是一个vue自定义的事件对象
// 我们把他叫做中央事件总线
var bus = new Vue()
// 这个事件对象可以在任意位置监听事件
// 通过$on方法可以绑定事件监听
bus.$on('abc',function(val){
console.log(val)
})
// 可以在任意位置触发给对象上的特定事件
// 通过$emit方法可以触发事件
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>`
})
/* 异步组件 */
// 组件名任意，为了语义化表示是一个异步组件，以async-开头
Vue.component('async-home',function(resolve,reject){
// vue会根据我传入的这个函数
// 产生一个promise对象
setTimeout(function(){
// 要求通过resolve，把组件的配置传入
// 他会在3秒时间到了以后，给我按照配置创建好组件
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里面的函数
// reject是p.catch里面的函数
setTimeout(function(){
resolve('hello world')
},3000)
})
p.then(function(data){
console.log(data)
})
p.catch(function(){
})
</script>
动态组件
== 通过<component>元素的is属性可以实现
== 不同组件之间的切换
== 语法:
<component is="组件名称"></component>
keep-alive
== 可以让组件实例在第一次被创建的时候缓存下来
<ul id='ul'>
</ul>
<script>
+ 什么是虚拟DOM
== createElement() 产生的一个对象，叫做虚拟DOM
+ 什么是diff（different）算法
== 差异比较算法的一种
== 把树形结构按照层级分解
== 只比较同级元素
== 不同层级的节点只有创建和删除操作
+ 虚拟DOM+diff算法的方式和传统的dom操作对比，有什么好处
== 传统dom操作
== 在一次操作中
== 往往会伴随多次dom节点更新
== 浏览器收到第一个dom请求后
== 并不知道后面还有若干更新操作
== 就会马上执行流程
== 最终执行若干次
== 在后续找dom坐标的时候
== 可能因为前期更新dom
== 导致了后续要找的dom发送了变化
== 而且频繁操作dom还会出现页面卡顿，影响用户体验
== 虚拟dom+diff算法
== 若一次操作中有若干更新dom的动作
== 虚拟dom不会立即操作dom
== 而是将若干次更新的diff内容保存到本地的一个对象
== 最终将这个js对象一次性放到dom树上
== 再进行后续操作
== 避免大量无谓的计算量
for(var i=0;i<100;i++){
var li = document.createElement('li')
document.getElementById('ul').appendChild(li)
}
</script>
