将一个 reactive 代理对象打平，转换为 ref 代理对象，使得对象的属性可以直接在 template 上使用。
<html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello Vue3.0</title> <style> body, #app { text-align: center; padding: 30px; } </style> <script src=""></script> </head> <body> <h3>toRefs</h3> <div></div> </body> <script> const { createApp, reactive, ref, isRef, toRefs } = Vue const App = { // template: ` // <button @click='click'>reverse</button> // <div>{{ state.message }}</div> // `, // setup() { // const state = reactive({ // message: 'Hello Vue3.0!!' // }) // click = () => { // state.message = state.message.split('').reverse().join('') // console.log('state.message: ', state.message) // } // return { // state, // click // } // } template: ` <button @click='click'>count++</button> <div>{{ message }}</div> `, setup() { const state = reactive({ message: 'Hello Vue3.0!!' }) click = () => { state.message = state.message.split('').reverse().join('') console.log('state.message: ', state.message) } return { click, ...toRefs(state) } } } createApp(App).mount('#app') </script> </html>
computed : 创建计算属性
<html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello Vue3.0</title> <style> body, #app { text-align: center; padding: 30px; } </style> <script src=""></script> </head> <body> <h3>computed</h3> <div></div> </body> <script> const { createApp, reactive, ref, computed } = Vue const App = { template: ` <button @click='handleClick'>count++</button> <div>{{ count }}</div> `, setup() { const refData = ref(0); const count = computed(()=>{ return refData.value; }) const handleClick = () =>{ refData.value += 1 // 要修改 count 的依赖项 refData } console.log("refData:" , refData) return { count, handleClick } } } createApp(App).mount('#app') </script> </html>
watch : 创建 watch 监听