2-1
響應式資料 ref、reactive及 v-model 雙向綁定
- 響應式資料
ref 用法，修改其值必須用 變數.value 才行，可以接受任何型態的資料，但是不會對物件或陣列內部的屬性變動做監聽。
- 響應式資料
reactive 用法，只能用[陣列]或{物件}。可以做深層的監聽，以及訪問資料不需要 .value。
- 利用
v-model 可以做到雙向綁定（修改input，h1內容也會修改）。
<div id="app">
<h1>{{refMsg}}</h1>
<input type="text" v-model="refMsg">
<h1>{{reactiveMsg.Text}}</h1>
<input type="text" v-model="reactiveMsg.Text">
</div>
<script src="./js/vue.js"></script>
<script>
const {
ref,
reactive
} = Vue;
const App = {
setup() {
const refMsg = ref("Hello Vue ref!");
const reactiveMsg = reactive({
Text: "Hello Vue reactive!"
});
setTimeout(() => {
refMsg.value = "Hi ref!"
reactiveMsg.Text = "Hi reactive!"
}, 3000);
return {
refMsg,
reactiveMsg,
};
},
};
Vue.createApp(App).mount("#app");
</script>
完整範例
2. Vue 入門
