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>