Vue3.x — 使用set up

>[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 ~~~ ~~~ ~~~