[p6]3.1Vue基本使用

基本使用

v-model

<label>price</label>
<input v-model="price">
computed: {  // vue中v-model需要使用computed
    name: {
      get() {
        return this.price * 2
    }
    set(val) {
        this.price / 2
    }
  }
}

computed/watch

深度监听

watch: {
    detail: {
      handle(oldVal, val) {
        // todo
    },
        deep: true // 深度监听
    }
}

循环渲染

v-for="(item, index) in listArr"
v-for="(val, key, index) in listObj"

事件

事件参数

• event.target, 事件在哪里监听的
• event.currentTarget， 事件在哪里触发的 ``` @click=”hanldeClick1” @click=”handleClick2(id, $event)”

hanldeClick1(event) { const nativeEvent = event.proto.constructor const {target, currentTarget} = event } handleClick2(id, event) { }

1. **event 是原生的**
2. **事件被挂载到当前元素**
<a name="EKkZU"></a>
## 组件使用
<a name="u832r"></a>
### props和$emit
<a name="FOKky"></a>
### 自定义事件（发布订阅总线）

// event.js， 有时定义为Bus.js export default new New()

event.$emit() event.$on()

// warning, 必须要及时销毁, 否则可能造成内存泄漏 beforeDestroy () { event.$off(‘onAdd’, this.addHandler) } ```

组件生命周期

单个组件的生命周期

• 挂载：beforeCreate, created; beforeMount, mounted;
• 更新: beforeUpdate, updated;
• 销毁: beforeDestroy, destroyed

考点： **beforeDestroy中要做什么？**

• 解除绑定， 销毁自组件及事件监听器。
• 解除自定义事件。
• 销毁setTimout定时任务。
• 销毁window/document事件。

考点： created和mounted有什么区别？
created是把vue的实例初始化， 只存在于JS内存的一个变量， 没有开始渲染。
mounted是页面已经渲染完成。

父子组件的生命周期

关键：创建初始化是从外到内， 但渲染是从内到外。
父 beforeCreate
父 created
父 beforeMount
子 beforeCreate
子 created
子 beforeMount
子 mouted
父 mounted

更新组件， 类似
父 beforeUpdate
子 beforeUpdate
子 updated
父 updated

销毁组件
父 beforeDestroy
子 beforeDestroy
子 destroyed
父 destroyed
🔚 2020-6