实例成员之计算属性与监听属性

实例成员

1、字符串补充

在js中，字符串可以和python中的f-string格式化一样

1、字符串拼接变量可以用引号拼接（单引号和双引号一样）

"前缀" + 变量 + "后缀"

2、反引号拼接类似于f-string，${ 变量 }

`前缀${变量}后缀`

2、实例成员：计算属性 computed

1、其实就是vue中的方法属性，方法名可以直接作为属性名使用，属性值是返回的结果

2、在computed中声明的方法，不能在data中重复声明，computed中方法属性比data中声明的属性可以写更多的逻辑

3、方法属性，自带监听机制，在方法属性中出现的变量，都会被监听，一旦有任何监听到的变量变化，都会调用方法属性一次

4、方法属性一定要在页面中渲染一次，方法属性才有意义，多次渲染，方法属性只会被调用一次

5、方法属性的应用场景：一个变量依赖于多个变量，且需要进行一定的逻辑运算，比如：计算器

计算器案例

<div id="app">
    <input type="number" v-model="num1">
    +
    <input type="number" v-model="num2">
    =
    <button>{{ sum }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            num1: '',
            num2: '',
            // sum: ''  重复声明了
        },
        computed:{
            sum(){
                // num1 和 num2 中有值，&&表示和
                if (this.num1 && this.num2){
                    // 存数字字符串前加+变为数字
                    return +this.num1 + +this.num2;
                }
                return '计算'
            }
        }
​
    })
</script>

3、实例成员：监听属性 watch

1、watch中不定义属性，只监听属性，所以watch方法的返回值没有任何意义，只是监听变量值是否发生更新

2、watch中的方法名，就是被监听的属性，（方法名就是被监听的变量名）

3、被监听的变量一旦发生变化，监听方法就会被调用

4、应用场景：1.k线图，股票数据变化，k线图重新渲染，将逻辑数据转换成图像；2.拆分姓名，录入的名字拆分成姓和名，将数据逻辑拆分成多个数据

<div id="app">
姓名： <input type="text" v-model="full_name">
    <hr>
    姓： <button>{{ first_name }}</button>
    名： <button>{{ last_name }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '',
            last_name: ''
        },
        watch: {
            full_name(){
                if (this.full_name){
                    this.first_name=this.full_name.split("")[0];
                    this.last_name=this.full_name.split("")[1];
                } else {
                    this.first_name='未知';
                    this.last_name='未知'
                }
            }
        }
    })
</script>