watchEffect : 如果响应性的属性有变更，就会触发这个函数
<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>watch && watchEffect</h3> <div></div> </body> <script> const { createApp, reactive, ref, watch, watchEffect } = Vue const App = { template: ` <div> <button @click="handleClick()">按钮</button> <button @click="handleStop">停止 watch</button> <button @click="handleStopWatchEffect">停止 watchEffect</button> <div>{{ refData }}</div> </div>` , setup() { let refData = ref(0); const handleClick = () =>{ refData.value += 1 } const stop = watch(refData, (val, oldVal) => { console.log('watch ', refData.value) }) const stopWatchEffect = watchEffect(() => { console.log('watchEffect ', refData.value) }) const handleStop = () =>{ stop() } const handleStopWatchEffect = () =>{ stopWatchEffect() } return { refData, handleClick, handleStop, handleStopWatchEffect } } } createApp(App).mount('#app') </script> </html>
v-model：就是双向绑定
<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>v-model</h3> <div></div> </body> <script> const { createApp, reactive, watchEffect } = Vue const App = { template: `<button @click='click'>reverse</button> <div></div> <input v-model="state.message" /> <div>{{ state.message }}</div>`, setup() { const state = reactive({ message:'Hello Vue 3!!' }) watchEffect(() => { console.log('state change ', state.message) }) click = () => { state.message = state.message.split('').reverse().join('') } return { state, click } } } createApp(App).mount('#app') </script> </html>
使用 readonly 函数，可以把 普通 object 对象、reactive 对象、ref 对象 返回一个只读对象。
返回的 readonly 对象，一旦修改就会在 console 有 warning 警告。
程序还是会照常运行，不会报错。
<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>readonly</h3> <div></div> </body> <script> const { createApp, reactive, readonly, watchEffect } = Vue const App = { template: ` <button @click='click'>reverse</button> <button @click='clickReadonly'>readonly++</button> <div>{{ original.count }}</div> `, setup() { const original = reactive({ count: 0 }) const copy = readonly(original) watchEffect(() => { // works for reactivity tracking console.log(copy.count) }) click = () => { // mutating original will trigger watchers relying on the copy original.count++ } clickReadonly = () => { // mutating the copy will fail and result in a warning copy.count++ // warning! } return { original, click, clickReadonly } } } createApp(App).mount('#app') </script> </html>
provide 和 inject 启用类似于 2.x provide / inject 选项的依赖项注入。
两者都只能在 setup() 当前活动实例期间调用。
import { provide, inject } from 'vue' const ThemeSymbol = Symbol() const Ancestor = { setup() { provide(ThemeSymbol, 'dark') } } const Descendent = { setup() { const theme = inject(ThemeSymbol, 'light' /* optional default value */) return { theme } } }inject 接受可选的默认值作为第二个参数。
如果未提供默认值，并且在 Provide 上下文中找不到该属性，则 inject 返回 undefined。
Lifecycle Hooks