目錄Vue中的響應式對象獨立的響應式值計算變數監聽響應式變數setup方法 Vue中的響應式對象 Vue3允許在setup()中定義組件需要的數據和方法, 通過return在模板中可以直接使用 reactive方法 <body> <div id = "Application"> </div> <sc ...
目錄
Vue中的響應式對象
Vue3允許在setup()中定義組件需要的數據和方法, 通過return在模板中可以直接使用
-
reactive方法
<body> <div id = "Application"> </div> <script> const App = Vue.createApp({ setup() { let myData = Vue.reactive({ value: 0 }) function click() { myData.value += 1 console.log(myData.value) } return { myData, click } }, template: ` <h1>測試數據: {{myData.value}}</h1> <button @click = "click">單擊</button> ` }) App.mount("#Application") </script> </body> // 使用這個方法對自定義的JavaScript對象進行包裝, 為其添加響應性
獨立的響應式值
- Vue提供的ref方法來定義響應式獨立值, ref方法會幫我們完成對象的包裝
<body>
<div id = "Application">
</div>
<script>
const App = Vue.createApp({
setup() {
let myObject = Vue.ref(0)
function click() {
myObject.value += 1
console.log(myObject.value)
}
return {
myObject,
click
}
},
template: `
<h1>測試數據: {{myObject}}</h1>
<button @click = "click">單擊</button>
`
})
App.mount("#Application")
</script>
</body>
// 在模板中使用setup中返回的使用ref定義的數據時, 數據對象會自動展開, 直接使用即可
- toRefs方法對響應式對象進行解構賦值
<body>
<div id = "Application">
</div>
<script>
const App = Vue.createApp({
setup() {
let myObject = Vue.reactive({
value: 0
})
let { value } = Vue.toRefs(myObject)
// Vue會自動將解構的數據轉換成ref對象變數, 在setup方法內部使用時, 要使用其內部包裝的value屬性
function click() {
value.value += 1
console.log(value.value)
}
return {
value,
click
}
},
template: `
<h1>測試數據: {{value}}</h1>
<button @click = "click">單擊</button>
`
})
App.mount("#Application")
</script>
</body>
計算變數
使用Vue提供的computed方法來創建計算變數
<body>
<div id = "Application">
</div>
<script>
const App = Vue.createApp({
setup() {
let a = Vue.ref(1);
let b = Vue.ref(2);
let sum = Vue.computed(() => {
return a.value + b.value
});
function click() {
a.value += 1
b.value += 2
}
return {
sum,
click
}
},
template: `
<h1>測試數據: {{sum}}</h1>
<button @click = "click">單擊</button>
`
})
App.mount("#Application")
</script>
// 計算變數也支持被賦值
/**
let sum = Vue.computed({
set(value) {
a.value = 0
b.value = 0
}
get() {
return a.value + b.value
}
})
*/
</body>
監聽響應式變數
Vue提供的watchEffect方法和watch方法, 無需手動指定要監聽的變數
Vue.watch(param, func)
Vue.watchEffect(param, func)
setup方法
setup方法會在組件創建前執行, 即對應組件的生命周期方法beforeCreate調用之前執行
組合式API的核心方法, 代碼層面上將分離的相關邏輯點進行聚合
接受兩個參數props 和 context
方法中可定義聲明周期行為
