计算属性与监听属性

作者：我家自动化 | 2024-06-01 06:17:35

踩

计算属性与监听属性

【 1 】计算属性

计算属性大致就是这样

# 1  计算属性是基于它们的依赖进行缓存的

# 2 计算属性只有在它的相关依赖发生改变时才会重新求值

# 3 计算属性就像Python中的property，可以把方法/函数伪装成属性
# 计算属性本质上是一个函数，它们可以通过 get 和 set 方法对属性进行操作。

# 4 写在computed中，必须返回值--》返回值才是属性
	-以后把他当属性用
    -被for循环
1
2
3
4
5
6
7
8
9
10

个人的理解就是

vue中的计算属性的好处就是我比如在设置了一个input标签里写了计算属性之后别的组件发生改变我的input标签也不会发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>

</head>
<body>
<div id="app">

    <input type="text" v-model="name">--》》{{ newName }}
    <hr>
    <input type="text" v-model="name1">---》{{ name1 }}


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            name1: ''

        },
        methods: {
            // 普通函数形式
            handleToUpper() {
                console.log('函数我执行了')
                return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
            }
        },
        computed:{
            // 将 handleToUpper() 方法改写为计算属性
            newName(){
                console.log('计算属性我执行了')
                return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
            }
        }


    })


</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

【 2 】监听属性

# 1 监听住一个属性，只要这个属性发生变化，就执行函数
1

name 属性被监听，当它的值发生变化时，会触发相应的处理函数。

在Vue.js中，监听属性（Watchers）必须在 watch 对象中定义，而计算属性（Computed Properties）必须在 computed 对象中定义。

Watchers（监听属性）：用于监听某个数据的变化，并在数据发生变化时执行一些自定义的逻辑。你可以在 watch 对象中定义一个或多个属性，每个属性对应一个要监听的数据，并指定一个处理函数。
Computed Properties（计算属性）：用于基于已有的数据计算出一个新的值，这个新的值会被缓存起来，只有在相关的依赖发生变化时才会重新计算。你可以在 computed 对象中定义计算属性，每个属性对应一个计算值的处理函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>

</head>

<div id="app">
    <input type="text" v-model="name">
    <p>新的 name: {{ name }}</p>
    <p>旧的 name: {{ oldName }}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'John',
            oldName: ''
        },
        watch: {
            // 监听name属性的变化
            name: function(newValue, oldValue) {
                this.oldName = oldValue; // 将旧的名字存储到oldName数据属性中
                console.log('Name changed from ' + oldValue + ' to ' + newValue);
            }
        }
    });
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

【 3 】生命周期钩子

生命周期

new Vue---->根组件.03

vue2 组件的生命周期钩子函数

一个vue的组件，从创建开始—》到最后销毁—》经历一些过程—》每个过程都绑定了一个函数–》当到这个过程的时候，这个函数就会执行
面向切面编程：AOP

8个生命周期钩子函数

beforeCreate：组件创建之前实现这个：组件html，js–》html和js都是空的
created：组件创建完成后：js就有值了，html还是空的（向后端发送ajax请求）
beforeMount：挂载模板之前，js有值，模板(html) 还是空的（向后端发送ajax请求）
mounted：挂载完成：js有值，模板有值
beforeUpdate：刷新之前执行：只要页面发送变化或js变量发生变化，就会触发它的执行
updated：刷新之后执行
beforeDestroy：被销毁之前执行（资源清理性工作）
destroyed：被销毁之后执行

实际用途

页面加载完成，向后端发请求拿数据
- 写在create中
组件中有定时任务，组件销毁，要销毁定时任务、

# 1 new Vue---->根组件
# 2 创建全局组件---》放在根组件中
1
2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>组件使用</h1>
    <button @click="hanleShow">显示隐藏组件</button>
    <hr>
    <Child v-if="isShow"></Child>
    <hr>


</div>
</body>
<script>

    let a = {
        template: `
          <div>
            <button @click="handleClick">{{ title }}</button>
          </div>`,
        data() {
            return {
                title: '首页',
                t:null
            }
        },
        methods: {
            handleClick() {
                this.title = '拜年了'
                alert(this.title)
            }
        },

        beforeCreate() {
            console.log('beforeCreate')
            console.log(this.title)
            console.log(this.$el)
        },
        created() {
            // 跟后端交互
            console.log('created')
            console.log(this.title)
            console.log(this.$el)
            // 启动定时器--》每隔3s，打印helloworld
            this.t=setInterval(()=>{
                console.log('hello world')
            },3000)

        },
        beforeMount() {
            console.log('beforeMount')
            console.log(this.title)
            console.log(this.$el)
        },
        mounted() {
            console.log('mounted')
            console.log(this.title)
            console.log(this.$el)
        },

        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy(){
            console.log('beforeDestroy')
            // 销毁定时器
            clearInterval(this.t)
            this.t=null
        },
        destroyed() {
            console.log('destroyed')
        },

    }
    // 1 定义全局组件
    Vue.component('Child', a)

    var vm = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        methods: {
            hanleShow() {
                this.isShow = !this.isShow
            }
        }


    })


</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/656379

计算属性与监听属性

【 1 】计算属性

计算属性大致就是这样

【 2 】监听属性

【 3 】生命周期钩子

生命周期

new Vue---->根组件.03

vue2 组件的生命周期钩子函数

8个生命周期钩子函数

实际用途