门户网站html模板,全景图网站怎么做,猎头公司全称,网站模板编辑器一、Composition API优势
相对于vue2的option API Vue3的Composition API设计更有优势
Composition(组合式)Api 功能分组
Composition(组合式)Api 功能导入复用
组合式Api 所解决的问题
(1) 更好的代码组织结构
(2) 相同的代码逻辑可以进行复用
home.vue 3种方式递进升级…一、Composition API优势
相对于vue2的option API Vue3的Composition API设计更有优势
Composition(组合式)Api 功能分组
Composition(组合式)Api 功能导入复用
组合式Api 所解决的问题
(1) 更好的代码组织结构
(2) 相同的代码逻辑可以进行复用
home.vue 3种方式递进升级
templatediv classhomedivp{{ name }}/pbutton clickgetName姓名/button/divdivp{{ age }}/pbutton clickgetAge年龄/button/div/divHomeB/HomeB
/templatescript
// is an alias to /src
import HelloWorld from /components/HelloWorld.vue;
import HomeB from ./HomeB.vue;
// import { ref } from vue;
import { useName, useAge } from ./user;export default {name: Home,setup() {// 1.Composition(组合式)Api// const people {// name: yusir,// age: 18,// };// const name ref();// const getName () {// name.value people.name;// };// const age ref();// const getAge () {// age.value people.age;// };// return {// name,// getName,// age,// getAge,// };/* ------------------------ */// 2.Composition(组合式)Api 功能分组// const people {// name: yusir,// age: 18,// };// return {// ...useName(people), //展开运算符// ...useAge(people),// };// function useName(people) {// const name ref();// const getName () {// name.value people.name;// };// return {// name,// getName,// };// }// function useAge(people) {// const age ref();// const getAge () {// age.value people.age;// };// return {// age,// getAge,// };// }/* ------------------------ */// 3.Composition(组合式)Api 功能导入复用// 组合式Api 所解决的问题// (1) 更好的代码组织结构// (2) 相同的代码逻辑可以进行复用const people {name: yusir,age: 18,};return {...useName(people), //展开运算符...useAge(people),};},components: {HelloWorld,HomeB,},
};/scriptHomeB.vue
templatediv classhomedivp{{ name }}/pbutton clickgetName姓名/button/divdivp{{ age }}/pbutton clickgetAge年龄/button/div/div
/template
script
import { useName, useAge } from ./user;export default {name: HomeB,setup() {const people {name: yusirxiaer,age: 19,};return {...useName(people), //展开运算符...useAge(people),};},
};
/script
style langless scoped/styleuser.js
import {ref
} from vue
export function useName(people) {const name ref();const getName () {name.value people.name;};return {name,getName,};
}
export function useAge(people) {const age ref();const getAge () {age.value people.age;};return {age,getAge,};
}
二、setup 入口函数
1.组件创建之前被调用
setup 先于created执行this指向windows
created()里打印的this 是proxy对象 指向组件实例
setup函数参数
Props Context (看HomeB子组件)
Context JavaScript对象
context.attrs: Attribute属性(非响应式对象)非props数据context.slots: 插槽非响应式对象context.emit: 触发事件的方法 this.$emit
2.this不会只指向当前组件实例
3.返回值
返回一个对象,对象的属性可以直接在模板中进行使用就像Vue2使用data和methods一样
看代码例子
Home.vue
templateHomeB :titletitle desc父组件传递过来的普通属性 updateupdateh1普通的匿名插槽/h1h2{{ title }}/h2/HomeB
/templatescript
// is an alias to /src
import HomeB from ./HomeB.vue;export default {name: Home,setup() {},data() {return {title: 父组件的title,};},created() {console.log(created()打印this);console.log(this);},methods: {update(newTitle) {this.title newTitle;},},components: {HomeB,},
};/scriptHomeB.vue
templatediv classhomeB/div
/template
script
export default {name: HomeB,props: {title: {type: String,required: true,},},setup(props, { attrs, slots, emit }) {console.log(props:, props);console.log(Attribute (非响应式的对象):, attrs);console.log(插槽:, slots.default());emit(update, 子组件更新数据的事件);},
};
/script
style langless scoped/style
