09 监视属性

最新推荐文章于 2023-06-08 01:10:39 发布

白茶.清欢

最新推荐文章于 2023-06-08 01:10:39 发布

阅读量150

点赞数

分类专栏：前端学习 # Vue学习

本文链接：https://blog.csdn.net/baidu_41922918/article/details/119273076

版权

Vue.js 计算属性监听属性数据绑定热更新

关键词由CSDN通过智能技术生成

前端学习同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Vue学习

7 篇文章 0 订阅

订阅专栏

1. 天气案例计算属性实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE复习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <p>今天天气很<b>{{ info }}</b></p>
    <hr>
    <button @click="changeWeather">点击切换天气</button>

</div>

<script>
    new Vue({
        el: "#root",
        data: {
            isHot: true,
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        computed: {
            info() {
                return this.isHot ? "炎热" : "凉爽";
            }
        }
    })

</script>

</body>
</html>

2. 天气案例监听属性实现

			监视属性watch：
				1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
				2.监视的属性必须存在，才能进行监视！！
				3.监视的两种写法：
						(1).new Vue时传入watch配置
						(2).通过vm.$watch监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE复习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <p>今天天气很<b>{{ info }}</b></p>
    <hr>
    <button @click="changeWeather">点击切换天气</button>

</div>

<script>
    new Vue({
        el: "#root",
        data: {
            isHot: true,
            info: "",
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            isHot() {
                this.info = (!this.isHot ? "炎热" : "凉爽");
            }
        }
    })

</script>

</body>
</html>

			computed和watch之间的区别：
					1.computed能完成的功能，watch都可以完成。
					2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
			两个重要的小原则：
						1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
						2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
							这样this的指向才是vm 或 组件实例对象。