Vue 高级特性回顾123

$set

介绍：

1. 使用场景：因为Vue无法检测通过索引值修改的变化，所以要通过$set(this.list,'需要修改的属性名'，‘修改的值’）来强制刷新视图
2. 无法通过索引值修改的原因：Vue通过object.definePropery劫持对象的getter获取,setter设置,然后双向绑定原理,数据更新,试图更新,试图更新,数据更新；数据与视图桥梁是:所有的指令；Vue使用数组时,只是重写了数组的方法。 

 应用实例

export default{
     data() {
		    return {
				list:[1,2,3,4]
		    }
     },
     methods: {
  		     changeIt(){
		            this.$set(this.list,3,6)
		            console.log(this.list)//值为[1,2,3,6]
             }
}

跨组件传参

1. 原理：利用vue空实例实现跨页面传参方式
2. 创建 vue的实例：var bus = new Vue();
3. 监听当前实例上的自定义事件： bus.$on(event，callback)
4. 触发当前实例上的事件：bus.$emit(“事件名”,‘传递的参数’)
5. 移除自定义事件：bus.$off(“事件名”)

 nextTick

数据更新，dom挂载后执行的函数

export default{
       data（）{
             return{
                msg：''
            }
       },
		methods: { 
			getNew() {
				this.$nextTick(() => {
					this.msg = document.getElementById("id").innerText
				})
			}
		}
}

总结

要有耐心，持之以恒。