试用期对VUE的学习

问题

data中为什么要使用return返回数据

如果不使用return进行包裹，会导致data中的数据全局可见，造成变量污染。

计算属性与方法的差异

计算属性的出现是为了减少模板负担过重，难以维护。虽然使用method也可以完成同样的操作，但我们更倾向于单对一个变量进行操作时使用computed。他俩职责不一样，函数一般用来作为数据的处理器来使用。

Vue中出现的语法糖

1. v-model : event.target.value
2. 事件冒泡 click.stop/click.self : event.stopPropagation()

生命周期

VUE2

创建、挂载只执行一次

创建

beforecreate

获取不到this.data

created

能获取到this.data

状态初始化 或 挂载到当前实例的一些属性

一般用于：查看localstorage或cookie中的值，用来处理状态

挂载

beforeMount

获取不到DOM中{{}}模板

在模板解析之前最后一次修改模板DOM节点

mounted

拿到真实的DOM节点，即{{}}中的真实数据

依赖于DOM创建之后，才进行初始化工作的插件

一般用于：

1. 轮播图插件
2. 订阅 bus.$on
3. 发ajax

更新

beforeUpdate

一般用于：记录滚动条的位置

updated

一般用于：更新完成，获取更新后的DOM

销毁

1. 清除定时器 clearInterval(this.id)
2. 事件解绑 window.onresize = null

组件之间的通信问题

父子

porps

props:{
    name :{
        type : String ,
        default : ""
    }
}

子父

this.$emit

//父组件中定义
<child @event="handleData"></child>
methods : {
    handleData(data){
        console.log(data) //100
        //处理子传递过来的数据
    }
}

//子组件中定义
<button @click="handleClick">点击</button>
methods : {
    handleClick(){
        this.$emit("event",100)
    }
}

叔侄 甚至更多

1. bus 中央事件总线
2. vuex 状态管理