computed概念

基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

3.2 computed计算属性 VS methods方法

computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

methods计算属性
作用：给Vue实例提供一个方法，调用以处理业务逻辑

总结

1. computed有缓存特性，methods没有缓存
2. 当一个结果依赖其他多个值时，推荐使用计算属性
3. 当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

3.3 计算属性的完整写法

计算属性默认的简写，只能读取访问，不能“修改”，如果要修改，需要写计算属性的完整写法。

四、watch侦听器（监听器）

4.1 基础语法

作用：

监视数据变化，执行一些业务逻辑或异步操作

语法：

• watch同样声明在跟data同级的配置项中
• 简单写法：简单类型数据直接监视
• 完整写法：添加额外配置项

data: { words: '苹果',obj: {words: '苹果'}
},watch: {// 该方法会在数据变化时，触发执行数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },'对象.属性名' (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}

4.3 完整写法

语法

完整写法，添加额外的配置项

• deep:true 对复杂类型进行深度监听
• immediate:true 初始化立即执行一次

<template><div><!-- 条件选择框 --><div class="query"><span>翻译成的语言：</span><select  v-model="obj.lang"><option value="italy">意大利</option><option value="english">英语</option><option value="german">德语</option></select></div><!-- 翻译框 --><div class="box"><div class="input-wrap"><span><i>⌨️</i>文档翻译</span></div><div class="input-wrap"><textarea v-model="obj.words"></textarea></div><div class="Qinput-wrap"><textarea v-model="words"></textarea></div><div class="output-wrap"><div class="transbox">{{result}}</div></div></div></div>
</template><script>export default {data() {return {words:'',obj: {words: '',lang: 'english',},result: '',//翻译结果timer: null//延时器i}},watch: {// //该方法在数据变化时调用执行// words(newValue, oldValue) {//   console.log("", newValue, oldValue)//   clearTimeout(this.timer)//   this.timer = setTimeout(async () => {//     var num = newValue.length + 101;//     this.result = Math.floor(Math.random() * num);//   }, 300)// },// 'obj.words'(newValue) {//   //防抖：延迟执行//   clearTimeout(this.timer)//   this.timer = setTimeout(async () => {//     var num = newValue.length + 101;//     this.result = Math.floor(Math.random() * num);//   }, 300)// },words: {handler(newValue, oldValue) {console.log("words handler", newValue, oldValue)clearTimeout(this.timer)this.timer = setTimeout(async () => {var num = newValue.length + 101;this.result = Math.floor(Math.random() * num);}, 300)},immediate: true,},obj: {deep: true, immediate: true,handler(newValue, oldValue) {console.log("1:", newValue, oldValue)clearTimeout(this.timer)this.timer = setTimeout(async () => {var num = newValue.words.length + 101;this.result = Math.floor(Math.random() * num);}, 300)}},},}
</script>

九、组件

9.1 组件的三大组成部分

作用

提供数据的双向绑定

• 数据变，视图跟着变 :value
• 视图变，数据跟着变 @input

语法

v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写

<template><div id="app" ><input v-model="msg" type="text"><input       :value="msg"     @input="msg = $event.target.value" type="text"><input v-bind:value="msg" v-on:input="msg = $event.target.value" type="text"></div>
</template>

注意

$event用于在模板中，获取事件的形参

:model是Element属性

:model相当于v-bind:model的缩写—— 对model属性 绑定对应的data

10.2 v-model简化代码

目标

父组件通过v-model简化代码，实现子组件和父组件数据双向绑定

如何简化

v-model其实就是:value和@input事件的简写

• 子组件：props通过value接收数据，事件触发input
• 父组件：v-model直接绑定数据

父组件

<BaseSelect v-model="selectId"></BaseSelect>

子组件

<select :value="value" @change="handleChange">...</select>
props: {value: String
},
methods: {handleChange (e) {this.$emit('input', e.target.value)}
}

10.3 表单类组件封装

需求目标

实现子组件和父组件数据的双向绑定

App.vue

<template><div class="app"><BaseSelect :cityId="selectId" @changeId="selectId = $event"></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,}
}
</script><style></style>

BaseSelect.vue

<template><div><select :value="cityId" @change="handleChange"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {props: {cityId: String},methods: {handleChange(e) {this.$emit('changeId', e.target.value)}}
}
</script><style></style>

10.4 .sync修饰符

作用

可以实现子组件与父组件数据的双向绑定，简化代码

简单理解：子组件可以修改父组件传过来的props值

场景

封装弹框类的基础组件，visible属性true显示false隐藏

本质

.sync修饰符就是 :属性名 和 @update:属性名 合写

语法

父组件

//.sync写法
<BaseDialog :visible.sync="isShow" />
--------------------------------------
//完整写法
<BaseDialog :visible="isShow" @update:visible="isShow = $event" />

子组件

props: {visible: Boolean
},this.$emit('update:visible', false)

10.5 ref 和 $refs

作用

利用 ref 和 $refs 可以用于获取dom元素或组件实例

特点

查找范围在当前组件内（更精确稳定）

10.5.1 获取dom语法

• 给要获取的盒子添加ref属性

<div ref="mychart" class="base-chart-box">子组件</div>

• 获取时通过$refs获取

const myChart = echarts.init(this.$refs.mychart)

注意

之前只用document.querySelect(‘.base-chart-box’)获取的是整个页面中的盒子

10.5.2 获取组件语法

• 目标组件添加ref属性

<BaseForm ref="baseForm"></BaseForm>

• 恰当时机，通过this.$refs.xxx，获取目标组件，就可以调用组件对象里面的方法

this.$refs.baseForm.组件方法()

10.6 异步更新、&nextTick

需求

编辑标题，编辑框自动聚焦

1. 点击编辑，显示编辑框    2 .让编辑框立刻获取焦点

问题

“显示之后”，立刻获取焦点是不能成功的     原因：Vue是异步更新DOM（提升性能）

解决方案

$nextTick : 等DOM更新后，才会触发执行此方法里的函数体

this.$nextTick(() => {this.$refs.inp.focus()
})

十一、自定义指令 略

十二、插槽

12.1 默认插槽

作用

让组件内部的一些结构支持自定义

语法

使用slot

子

<template><div><slot></slot></div>
</template>

父

<template><div><AppSon>slot中显示内容</AppSon></div>
</template>

显示效果

12.3 具名插槽

作用

多个slot使用name属性区分名字

语法

v-slot简写

v-slot写起来太长，vue给我们提供了一个简单写法 #

在vue2.6.0之前使用slot="插槽名"定义。

子

<template><div><slot name="head">默认数据</slot><slot name="content"></slot><slot name="footer"></slot></div>
</template>

父

<template><div><AppSon ><template v-slot:head>slot head中显示内容</template><template v-slot:content>slot content中显示内容</template><template v-slot:footer>slot footer中显示内容</template></AppSon>
--------------------------<AppSon ><template #head>slot head中显示内容</template><template #content>slot content中显示内容</template><template #footer>slot footer中显示内容</template></AppSon>
--------------------------<AppSon ><template #head></template><template #content>slot content中显示内容</template><template #footer>slot footer中显示内容</template></AppSon></div>
</template>

显示效果

12.4 作用域插槽 略