[Vue] 7.Vue的计算属性和侦听器

最新推荐文章于 2023-01-08 09:41:55 发布

weiweicn!

最新推荐文章于 2023-01-08 09:41:55 发布

阅读量75

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u014627255/article/details/125007179

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、计算属性computed

写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello world',
                    show: true,
                    count: 2,
                    price: 5,
                    name: 'title',
                    event: 'click'
                }
            },
            computed: {
                total() {
                    return this.count * this.price
                }
            },
            template: `<div>{{total}}</div>`
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>

在这里插入图片描述
2. 计算属性和method的区别：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello world',
                    show: true,
                    count: 2,
                    price: 5,
                    name: 'title',
                    event: 'click'
                }
            },
            // 当计算属性以来的内容发生变更时，才会重新执行计算
            computed: {
                total() {
                    return Date.now();
                }
            },
            methods: {
                // 只要页面重新渲染，就会重新计算
                getTotal() {
                    return Date.now();
                }
            },
            template: `<div>{{message}}-{{total}}</div>`,
            // template: `<div>{{message}}-{{getTotal()}}</div>`
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>

二、侦听器：比如当某个数据发生变化时，希望隔一段时间就能打印出来‘change’

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello world',
                    show: true,
                    count: 2,
                    price: 5,
                    name: 'title',
                    event: 'click'
                }
            },
            // 此时如果price数据发生变化，三秒之后会打印'price changed'
            watch: {
                price() {
                    setTimeout(() => {
                        console.log('price changed')
                    }, 3000)
                }
            },
            // 当计算属性以来的内容发生变更时，才会重新执行计算
            computed: {
                total() {
                    return Date.now();
                }
            },
            methods: {
                // 只要页面重新渲染，就会重新计算
                getTotal() {
                    return Date.now();
                }
            },
            template: `<div>{{message}}-{{total}}</div>`,
            // template: `<div>{{message}}-{{getTotal()}}</div>`
        });
        const vm = app.mount('#root')
    </script>