1.setup 是vue3中的一个配置项
2、setup是所有组件所需要的数据和方法都需要配置到setup中的
3、setup两种返回值:
若返回一个对象 若返回一个渲染函数
mian.js文件
注意:尽量不与Vue2混用 setup中无法访问vue2中的配置
不能是async函数,因为返回值不再是return,而是promise,模板看不到return对象中的属性 被 promise包裹的对象
//引入的不再是vue构造函数,引入的是一个名为createAPP的工厂函数import { createApp } from 'vue'
import App from './App.vue'//创建应用实例对象--app(类似之前Vue2中的vm,但是app比vm更轻)
const app = createApp(App)
//挂载
app.mount('#app')/*const vm = new Vue({render:h=>h(App)
})
vm.$mount('#app')*/
App.vue文件
个人信息
姓名:{{ name }}
姓名:{{ age }}
姓别:{{ sex }}
作用:定义一个响应式的数据
语法 const xxx=ref(‘实例化的值’)
创建一个包含响应式的引用对象
JS中操作数据: xxx.value
模板中读取数据:不需要.value 直接 {{xxx}}
接收的数据类型:基本数据类型 对象类型
RefImpl 把一个数据变成响应式 用ref 引用对象
/响应式数据 数据变化时怎么响应到页面
import { ref } from "vue";
export default {name: "App",setup() {//数据let name = ref("陈奇真");let age = ref(18);//方法function changeInfo() {name.value = "郭雅琦";age.value = 19;}//返回一个对象 常用return {name,age,changeInfo,};
在模板template中不需要加name.value age.value 模板会自动识别
但是是setup中对配置的属性设置数据值时需要加name.value age.value
姓名:{{ name }}
年龄:{{ age }}
以上这些属性属于引用对象 ref对象
但是当层级越多,即可不用 .value 直接把对象值转化为Proxy ES6中的语法
基本类型用ref
定义一个对象类型的响应式数据
const 代理对象= reactive(源对象)
返回一个代理对象(Proxy的实例对象,简称proxy对象)
reactive的响应是深层次的,内部是基于ES6的Proxy实现的