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 作用域插槽 略