<template> <!-- 传递数据到我们的子组件上去,和Vue2还是一样的 --> <User v-if="isFlag" name="Jack" age="50" :sex="sex"></User> <button @click="change()">按一下</button> </template> <script> import {ref} from "vue"; import User from "./components/User.vue"; export default { name : "App", components : {User}, // 直接在VC对象里面配置的叫做选项式API // data,methods,compted等 setup(){ console.log("setup,安装组合式API"); // 组合式API:data,computed,methods都在这里 // 自上而下执行 // 组合式API有顺序,因为他们都在setup里面配置了 // 有了组合式API后 // 就会先安装组合式API,然后执行beforeCreate的动作 // 初始化选项API,创建vc对象 let sex = ref("男"); let isFlag = ref(true); function change(){ isFlag.value = !isFlag.value; } return {sex,isFlag,change}; }, beforeCreate(){ console.log("beforeCreate"); }, created(){ console.log("created"); } } </script> <style> </style>
<template>
<!-- 传递数据到我们的子组件上去,和Vue2还是一样的 -->
<User v-if="isFlag" name="Jack" age="50" :sex="sex"></User>
<button @click="change()">按一下</button>
</template>
<script>
import {ref} from "vue";
import User from "./components/User.vue";
export default {
name : "App",
components : {User},
// 直接在VC对象里面配置的叫做选项式API
// data,methods,compted等
setup(){
console.log("setup,安装组合式API");
// 组合式API:data,computed,methods都在这里
// 自上而下执行
// 组合式API有顺序,因为他们都在setup里面配置了
// 有了组合式API后
// 就会先安装组合式API,然后执行beforeCreate的动作
// 初始化选项API,创建vc对象
let sex = ref("男");
let isFlag = ref(true);
function change(){
isFlag.value = !isFlag.value;
}
return {sex,isFlag,change};
},
beforeCreate(){
console.log("beforeCreate");
},
created(){
console.log("created");
}
}
</script>
<style>
</style>
<template> <h1>{ { name }}</h1> <h1>{ { age }}</h1> <h1>{ { sex }}</h1> <h2>{ { counter }}</h2> <!-- <button @click="counter++">加一</button> --> <button @click="add()">加一</button> </template> <script> import {ref} from "vue"; export default { name : "User", // 使用props接收传递的数据 props : [ // 在这里已经配置过了 "name","age","sex" ], // Vue3的生命周期函数有两种写法 // 选项式和组合式 beforeCreate(){ console.log("beforeCreate"); }, created(){ console.log("created"); }, beforeMount(){ console.log("beforeMount"); }, mounted(){ console.log("mounted"); }, beforeUpdate(){ console.log("beforeUpdate"); }, updated(){ console.log("updated"); }, beforeUnmount(){ console.log("beforeUnmount"); }, unmounted(){ console.log("unmounted"); }, setup(props){ let counter = ref(0); // setup没有this对象,无法获取到props // vue3调用setup之前,会给setup传递参数,而第一个参数就是props // 这里的props也被包装成了一个代理对象,也是具有响应式的Proxy对象 console.log(props); function add(){ counter.value++; } return {counter,add}; // props自动做了代理,不需要我们定义出来return了 // let name = props.name; // let age = props.age; // let sex = props.sex; // return {name,age,sex}; } } </script> <style> </style>
<template>
<h1>{ { name }}</h1>
<h1>{ { age }}</h1>
<h1>{ { sex }}</h1>
<h2>{ { counter }}</h2>
<!-- <button @click="counter++">加一</button> -->
<button @click="add()">加一</button>
</template>
<script>
import {ref} from "vue";
export default {
name : "User",
// 使用props接收传递的数据
props : [
// 在这里已经配置过了
"name","age","sex"
],
// Vue3的生命周期函数有两种写法
// 选项式和组合式
beforeCreate(){
console.log("beforeCreate");
},
created(){
console.log("created");
},
beforeMount(){
console.log("beforeMount");
},
mounted(){
console.log("mounted");
},
beforeUpdate(){
console.log("beforeUpdate");
},
updated(){
console.log("updated");
},
beforeUnmount(){
console.log("beforeUnmount");
},
unmounted(){
console.log("unmounted");
},
setup(props){
let counter = ref(0);
// setup没有this对象,无法获取到props
// vue3调用setup之前,会给setup传递参数,而第一个参数就是props
// 这里的props也被包装成了一个代理对象,也是具有响应式的Proxy对象
console.log(props);
function add(){
counter.value++;
}
return {counter,add};
// props自动做了代理,不需要我们定义出来return了
// let name = props.name;
// let age = props.age;
// let sex = props.sex;
// return {name,age,sex};
}
}
</script>
<style>
</style>
setup,安装组合式API App.vue:31 beforeCreate App.vue:34 created User.vue:50 Proxy(Object) {name: 'Jack', age: '50', sex: '男'} User.vue:22 beforeCreate User.vue:25 created User.vue:28 beforeMount User.vue:31 mounted User.vue:34 beforeUpdate User.vue:37 updated User.vue:34 beforeUpdate User.vue:37 updated User.vue:34 beforeUpdate User.vue:37 updated User.vue:34 beforeUpdate User.vue:37 updated User.vue:40 beforeUnmount User.vue:43 unmounted User.vue:50 Proxy(Object) {name: 'Jack', age: '50', sex: '男'} User.vue:22 beforeCreate User.vue:25 created User.vue:28 beforeMount User.vue:31 mounted
setup,安装组合式API
App.vue:31 beforeCreate
App.vue:34 created
User.vue:50 Proxy(Object) {name: 'Jack', age: '50', sex: '男'}
User.vue:22 beforeCreate
User.vue:25 created
User.vue:28 beforeMount
User.vue:31 mounted
User.vue:34 beforeUpdate
User.vue:37 updated
User.vue:34 beforeUpdate
User.vue:37 updated
User.vue:34 beforeUpdate
User.vue:37 updated
User.vue:34 beforeUpdate
User.vue:37 updated
User.vue:40 beforeUnmount
User.vue:43 unmounted
User.vue:50 Proxy(Object) {name: 'Jack', age: '50', sex: '男'}
User.vue:22 beforeCreate
User.vue:25 created
User.vue:28 beforeMount
User.vue:31 mounted