# 1.reactive 基本使用
App 为根组件 下面 Home 例子都被此组件引用
// App.vue | |
<template> | |
<div> | |
<home></home> | |
</div> | |
</template> | |
<script> | |
import Home from "./Home.vue"; | |
export default { | |
components: { | |
Home, | |
}, | |
}; | |
</script> | |
<style scoped></style> |
reactive 里面包裹的是一个对象！
// Home.vue | |
<template> | |
<div> | |
<h2>{{ state.counter }}</h2> | |
<button @click="increment">+1</button> | |
</div> | |
</template> | |
<script> | |
import { reactive } from "vue"; // 从 vue 中引入 reactive | |
console.log(reactive); // 打印出是一个函数 | |
export default { | |
setup() { | |
const state = reactive({ | |
counter: 100, | |
}); | |
// 执行五次 increment | |
const increment = () => { | |
state.counter++; | |
console.log(state.counter); | |
}; | |
return { | |
state, | |
increment, | |
}; | |
}, | |
}; | |
</script> | |
<style scoped></style> |
参考结果：
# 2.reactive 浅层解构
// Home.vue | |
<template> | |
<div> | |
<h2>{{ name }}</h2> | |
<button @click="changeName">改变name</button> | |
</div> | |
</template> | |
<script> | |
import { reactive } from "vue"; // 从 vue 中引入 reactive | |
export default { | |
setup() { | |
const info = reactive({ | |
name: "Neko", | |
age: 16, | |
}); | |
// 解构后 name 不是响应式的 | |
let { name, age } = info; | |
const changeName = () => { | |
name = "Nico"; | |
console.log("name:", name); //name 已经发生了改变，但不是响应式的 | |
console.log("info:", info); //info 的 name 也没有改变，说明解构后是深拷贝，引用地址不一样 | |
}; | |
return { | |
info, | |
name, | |
changeName, | |
}; | |
}, | |
}; | |
</script> | |
<style scoped> | |
</style> |
参考结果：
