vue3.x 侦听器watch 语法

 

注：实例环境 vue cli构建的项目

app.vue

<template>
  <Example></Example>
</template>

<script>
import Example from './components/Example'

export default {
  name: 'App',
  components: {
    Example
  }
}
</script>

<style>

</style>

Example.vue

<template>
    <div>
        <p>
            <label>text文本</label>
            <input type="text" v-model="text"/>
        </p>
        <p>
            <label>watch文本</label>
            {{watchText}}
        </p>
    </div>
</template>

<script>
    export default {
        name: "Example",
        data:function () {
            return {
                text:'',
                watchText:''
            }
        },
        watch:{
            text(newText, oldText) {
                console.log('newText:' + newText);
                console.log('oldText:' + oldText);
                this.watchText = newText
            }
        }
    }
</script>

<style scoped>

</style>