vue-cli3.0以上 + typeScript 教程学习指导（三） 计算属性 watch 新

这是一个系列文章 之前的系列文章地址：https://blog.csdn.net/www_share8/category_9877844.html

今天 我们来学习一下计算属性 和watch

vue中关于计算属性 就是当a,b(关联着a),当a改变后 b也要跟着改变 这个时候就可以使用计算属性了，watch 也有这样的功能，watch和计算属性的 区别 大家可以网上查询一下资料，这不是本次的重点 。

先来看一下 vue中是如下写计算属性的和watch

<template>
  <div class="tt">
    <el-input v-model="msg"></el-input>
    <div><span>我是计算属性内容，在输入后面添加hell--</span>{{inputContent}}</div>
    <div><span>我是watch 在输入内容后 加 world--</span>{{inputWatch}}</div>
  </div>
</template>
 
<script>
export default {
  name: 'tt',
  data () {
    return {
      msg:'',      
      inputWatch: ''
    }
  },
  computed: {
    inputContent: function () {
      return this.msg + ' hello'
    }
  },
  watch: {
    msg: {
      handler (newData, oldData) {
        this.inputWatch = newData + ' world'
      },
      immediate: true
    }
  }
}
</script>

ts 计算属性(get 计算属性名，引用和之前的一样)

在来看一下 typeScript中 由于vue教程中提到了,计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

说明计算属性是直接可以使用 get set 来设置了 这就是下面的这样的ts代码了

<template>
  <div class="hello">
    <el-input v-model="msg"></el-input>
    <div><span>我是计算属性内容，在输入后面添加hell--</span>{{inputContent}}</div>
  </div>
</template>
 
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
 
@Component
export default class HelloWorld extends Vue {
  private msg: string = "测试";
  get inputContent() {
    return this.msg + " hello";
  }
}
</script>

ts 中watch 代码如下

首先 从vue-property-decorator引入watch,

@Watch('监听内容'，{是否需要深度监听的内容})  后面跟一个回调函数 名字（叫什么都可以）

<template>
  <div class="hello">
    <el-input v-model="msg"></el-input>
    <div><span>我是watch 在输入内容后 加 world--</span>{{inputWatch}}</div>
  </div>
</template>
 
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 
@Component
export default class HelloWorld extends Vue {
  private msg: string = "测试";
  private inputWatch: string = "";
 
  @Watch("msg",{immediate: true, deep: true})
  onChangeValue(newVal: string, oldVal: string) {
    this.inputWatch = newVal + " world";
  }
}
</script>

总结一下，对比vue 计算属性变成了get  其他都没有变，watch 全新的写法 需要学习多练习