toRef 以及 context 參數 · vue筆記

[TOC] >[success] # toRef 以及 context 參數這章講解一下 **2** 個新的知識點，一個是 **composition API** 中的 **toRef** API，另一個是我們之前講過的 **setup 函數** 的 **第2個參數 context** 。 >[success] ## toRef 1. **解構賦值響應式數據正確寫法** 我們之前通過 **toRefs** 來解決 **解構賦值數據響應式問題** ，代碼如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>toRef</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // toRef const app = Vue.createApp({ template: ` <div>{{name}}</div> `, /** * created 實例被完全初始化之前 * @param {object} props - 當前組件的props * @param {number} contex - 上下文 */ setup(props, contex) { const { reactive, toRefs } = Vue const data = reactive({ name: 'dell' }) // 解構賦值 const { name } = toRefs(data) // 2s 后修改name變量 setTimeout(() => { name.value = 'lee' }, 2000) return { name } } }) const vm = app.mount('#root') </script> </html> ~~~ 2. **解構賦值響應式數據錯誤寫法** 如果在 **解構賦值時** ，我們把 **name** 改成 **age** ，這時候我們就會發現，在一開始 **data** 中沒有 **age** ，這時候 **解構賦值時有 age ，就會發生錯誤** ，這是 **因為 toRefs 這種語法，它從 data 這樣一個響應式對象里去找數據時，如果找不到，它不會給 age 一個默認的響應式的引用，而是給 age 賦值為 undefined，這樣的話， age 最開始不存在 data 中，它后面就不具備響應式，再改它，也無效果** ，代碼如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>toRef</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // toRef const app = Vue.createApp({ template: ` <div>{{age}}</div> `, /** * created 實例被完全初始化之前 * @param {object} props - 當前組件的props * @param {number} contex - 上下文 */ setup(props, contex) { const { reactive, toRefs } = Vue const data = reactive({ name: 'dell' }) // 解構賦值 const { age } = toRefs(data) // 2s 后修改name變量 setTimeout(() => { age.value = 'lee' }, 2000) return { age } } }) const vm = app.mount('#root') </script> </html> ~~~ 3. **toRef** 如果想解決上面的問題，我們可以用 **toRef** ，代碼如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>toRef</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // toRef const app = Vue.createApp({ template: ` <div>{{age}}</div> `, /** * created 實例被完全初始化之前 * @param {object} props - 當前組件的props * @param {number} contex - 上下文 */ setup(props, contex) { const { reactive, toRef } = Vue const data = reactive({ name: 'dell' }) // 意思是從 data 中取 age ，如果能取到就用取到的值， // 取不到就聲明一個空的響應式數據 const age = toRef(data, 'age') // 2s 后給 age 賦值 setTimeout(() => { age.value = 'lee' }, 2000) // 導出 age ，這里必須是對象的形式，就像在 vue2.x 時 return {} 一樣 return { age } } }) const vm = app.mount('#root') </script> </html> ~~~ **建議一般情況不要用 toRef** ，一般來說，如果后面代碼中要用到 **age** ,不妨直接在 **data** 中提前定義一個空的 **age** ，代碼如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>toRef</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // toRef const app = Vue.createApp({ template: ` <div>{{age}}</div> `, /** * created 實例被完全初始化之前 * @param {object} props - 當前組件的props * @param {number} contex - 上下文 */ setup(props, contex) { const { reactive, toRefs } = Vue const data = reactive({ name: 'dell', age: '' }) // 2s 后給 age 賦值 setTimeout(() => { data.age = 'lee' }, 2000) // 解構賦值 const { age } = toRefs(data) // 導出 age ，這里必須是對象的形式，就像在 vue2.x 時 return {} 一樣 return { age } } }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## Setup 的第二個參數 context 接下來我們講一下 **context** ， **context** 是個 **對象**，它有 **3** 個 **屬性值** 1. **attrs** **context** 的第 **1** 個參數是 **attrs（None-Props屬性）** ，下面用它寫一個小例子： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Setup 的第二個參數 context </title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ template: `<child style="color:red" />` }) // 子組件 app.component('child', { /** * created 實例被完全初始化之前 * @param {object} props - 當前組件的props * @param {number} contex - 上下文 */ setup(props, contex) { // 引入h函數 const { h } = Vue const { attrs, slots, emit } = contex // 使用render函數，并且使用 attrs return () => { return h('div', { style: attrs.style }, 'child') } } }) const vm = app.mount('#root') </script> </html> ~~~ 2. **slots** **context** 的第 **2** 個參數是 **slots** ， **slots** 是 **父組件傳遞過來的插槽** ，在 **vue2.x** 版本中，我們使用 **slots** 都需要 **this.$slots** ，在新版 **composition API** 中可以使用 **slots** ，例子如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Setup 的第二個參數 context </title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ template: `<child>parent</child>` }) // 子組件 app.component('child', { /** * created 實例被完全初始化之前 * @param {object} props - 當前組件的props * @param {number} contex - 上下文 */ setup(props, contex) { // 引入h函數 const { h } = Vue const { attrs, slots, emit } = contex // 使用render函數，并且使用 slots return () => { return h('div', {}, slots.default()) } } }) const vm = app.mount('#root') </script> </html> ~~~ 3. **emit** 在舊版 **vue2.x** 版本中， **子組件** 給 **父組件傳值** 通過 **this.$emit** ，代碼如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Setup 的第二個參數 context </title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ template: `<child @change="handleChange">parent</child>`, methods: { handleChange(){ alert('handleChange') } } }) // 子組件 app.component('child', { template: '<div @click="handleClick">123123</div>', methods: { handleClick(){ this.$emit('change') } } }) const vm = app.mount('#root') </script> </html> ~~~ 在新版 **composition API** 中這樣寫即可，代碼如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Setup 的第二個參數 context </title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ methods: { handleChange(){ alert('handleChange') } }, template: `<child @change="handleChange">parent</child>` }) // 子組件 app.component('child', { template: '<div @click="handleClick">123123</div>', /** * created 實例被完全初始化之前 * @param {object} props - 當前組件的props * @param {number} contex - 上下文 */ setup(props, contex) { const { attrs, slots, emit } = contex // 定義方法 function handleClick(){ emit('change') } // 導出方法 return { handleClick } } }) const vm = app.mount('#root') </script> </html> ~~~