CodingSecondaryVueBascal
Source
Edit
History

computed 计算属性

通过已有的属性得来

计算属性 最终在 vm 上，像 data属性 一样，可直接使用

选项式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new Vue({
    el: ,
    data: ,
    computed: {
        p1: {
            // 属性被读取时，getter执行。
            // 所依赖的数据发生变化时，getter执行
            get(){
                // ...
            },

            // 属性被修改时，set执行，
            set(value){ // value 为修改后的值
                // ...
            }
        }
    }
})

简写

查看更多
CodingSecondaryVueBascal
Source
Edit
History

watch 监视属性 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
new Vue({
    el: '#root',
    data:{
        isHot: true
    },
    methods:{},
    computed:{},
    watch:{ // 监视属性
        isHot:{
            // 当isHot发生改变时，调用 handler()
            handler(newValue, oldValue){
                // ...
            },

            // 配置监视
            immediate:true // 初始化时让 handle() 运行，省略默认 false
        }
    }
})

计算属性 也能监视

监视没有的属性不会报错，也能初始化执行一次

API 方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const vm = new Vue({
    el: '#root',
    data:{
        isHot: true
    },
    methods:{},
    computed:{}
})

vm.$watch('isHot', {
    // 当isHot发生改变时，调用 handler()
    handler(newValue, oldValue){
        // ...
    },

    // 配置监视
    immediate:true // 初始化时让 handle() 运行，省略默认 false
})

查看更多
CodingSecondaryVueBascal
Source
Edit
History

响应式

响应式： 能在改变时触发更新的状态。（对象数据改变时，前端绑定数据更新）

可以使用 Vue 的 reactive() API 来声明 响应式状态。

1
2
3
4
5
6
7
8
import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++
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
<template>
	<div>
		{{ objData }}
		<button @click="submitHander">改变数据</button>
	</div>
</template>

<script>
import { reactive } from 'vue'
export default {
    setup () {
        let objData=reactive({
            name:'林漾',
            age:31,
            sex:'女'
        })
        function submitHander(){
            objData.name='林漾1';
            objData.name='31';
            objData.name='女nv';
        }
        return {
            objData,
            submitHander
        }
    }
}
</script>

查看更多