>[success] # setup ~~~ 1.'setup()'作為一個新的組件選項，是 Composition API（組合API）的入口編寫組件邏輯將在setup函數中完成 2.setup將會在以下選項之前執行'Components','Props','Data','Methods','Computed Properties', 'Lifecycle methods' 3.setup 在beforeCreate之前執行(一次), 此時組件對象還沒有創建，因此在 setup 選項中沒有 this(' setup函數中的this 修改成了 undefined'),并且當props 被解析后，就作為組合式API 的入口點，不能通過this來問 'data/computed/methods / props' 4.'setup''類似'data()'需要返回一個對象 ，返回值被稱作 'render context,這個'對象將屬性暴露在模板上', 可以簡單的理解對象中的屬性或方法, 模板中可以直接使用，就好比定義的'data',"method"我們在vue模板直接調用. '板中可以直接使用此對象中的所有屬性/方法' 4.1.返回對象中的方法會與methods中的方法合并成功組件對象的方法,如果有重名, setup優先 4.2.一般不要混合使用: methods中可以訪問setup提供的屬性和方法, 但在setup方法中不能訪問data和methods 4.3.setup不能是一個async函數: 因為返回值不再是return的對象, 而是promise, 模板看不到return對象中的屬性數據 5.'setup' 函數有兩個參數'props' 和'context'，'setup(props, context) / setup(props, {attrs, slots, emit})' 5.1.'props'是setup函數的第一個形參，setup 函數中的 props 是響應式的，當傳入新的 prop 時，它將被更新。 因此注意'props' 是響應式的，你不能使用 ES6 解構，因為它會消除 'prop' 的響應性,當然如果你非要解構他 需要使用'toRefs' 將其轉換為響應式 5.2.'Context' 是setup函數的第二個形參，'context' 是一個普通的 JavaScript 對象可以做解構，解構后會暴露出 'attrs','slots','props','emit' 5.2.1.'props': 包含props配置聲明且傳入了的所有屬性的對象 5.2.2.'attrs': 包含沒有在props配置中聲明的屬性的對象, 相當于 this.$attrs 5.2.3.'slots': 包含所有傳入的插槽內容的對象, 相當于 this.$slots 5.2.4.'emit': 用來分發自定義事件的函數, 相當于 this.$emit ~~~ >[info] ## 案例 ~~~ 1.這個案例運行后的效果可以發現'name' 屬性被渲染和'print'方法都成功渲染在模板上，但發現'name'卻不能 根據'input'輸入響應式的改變，想讓數據進行響應后續需要了解將數據變成響應api ~~~ ~~~ <template> <div> {{name}} <input v-model="name" /> </div> </template> <script> export default { name: 'testlison', setup(prop, ctx) { const name = 'z' return { name } }, } </script> ~~~