【九月打卡】第3天 数据，方法，计算属性和侦听器（2）

课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节：2-9 数据，方法，计算属性和侦听器（2），2-10 样式绑定语法

主讲老师：Dell

课程内容：

今天学习的内容包括： 2-9 数据，方法，计算属性和侦听器（2），2-10 样式绑定语法

知识点：
    1. computed 和 watcher 都能实现的功能建议使用 computed，因为更简洁  
    2. computed 和 method 都能实现的功能建议使用 computed，因为有缓存
    3. 当子组件有两个标签时，$attrs可以继承父组件内对子组件定义的样式，如 :class='$attrs.class'

示例代码：

<script>
    // computed 和 watcher 都能实现的功能建议使用 computed，因为更简洁
    // computed 和 method 都能实现的功能建议使用 computed，因为有缓存
    const app = Vue.createApp({
        data() {
            return {
                message: 'hello',
                price: 5,
                count: 2,
                newTotal: 10
            }
        },
        computed: {
            // 当计算属性依赖的内容改变的时候才会触发
            total() {
                return this.count * this.price + '-' + Date.now();
            }
        },
        methods: {
            // 只要页面重新渲染，才会重新计算
            getTotal() {
                return this.count * this.price + '-' + Date.now();
            }
        },
        watch: {
            // price 发生变化时，函数会执行
            price(current, prev) {
                this.newTotal = current * this.count;
            }
        },
        template: `
            <div v-bind:title="message">{{ message }} {{ total }}</div>
            <br>
            <div>{{ message }} {{ getTotal() }}</div>
            <br>
            <div>{{ message }} {{ newTotal }}</div>
        `
    });

    const vm = app.mount('#root');
</script>

课程收获：

今天学完了第二章，这里只记录了今天学习的前两节知识点。Vue 的基本语法学的差不多了，接下来是第三章的 Vue 组件。按计划学习，15天内学完本课程，Step by step。

今日课程学习时间大约花费 22 分钟。