开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情
vue3项目介绍
1.使用vue-cli3创建
npm install -g @vue-cli
##保证vue cli 版本在4.5.0以上
vue --version
##创建项目
vue create project
//引入createApp函数,创建对应的应用,产生应用的实例对象
import { createApp } from 'vue'
//创建App应用返回对应的实例对象,调用mount方法进行挂载
createApp(App).mount('#app' )
//defineComponent函数,目的是定义一个组件,内部可以传入一个配置对象
import { defineComponent } from 'vue';
export default defineComponent ({
name: 'App'
})
Composition Api 组合api
1).setup
所有的组合api的函数都要在此处使用,只在初始化时执行一次
函数如果返回对象,对象中的属性或者方法,模板中也可以直接使用
{{number }}
setup() {
const number = 10;
rerurn number
}
ref
ref是一个函数,作用:定义一个响应式的数据,返回的是一个Ref对象,对象中有一个value属性,
如果需要对数据进行操作,需要使用该Ref对象调用value属性的方式进行数据的操作
//html模板中是不需要使用.value属性的写法
//一般用来定义一个基本类型的响应式数据
import { defineComponent, ref } from 'vue';
setup() {
//let count = 0 //此时的数据并不是响应式的数据
//此处的count为ref类型
const count= ref(0)
function updateCount() {
//报错: count是一个Ref的对象,对象不能进行++的操作
//count++
count.value ++
}
//返回的是一个对象
return {
count,
updateCount
}
}
}
}
//把数据变成响应式的数据
//返回的是一个proxy的代理对象,被代理的目标对象就是obj对象
//user现在是代理对象, obj是目标对象
//user对象的类型是Proxy
const user = reactive(obj)
//方法
function updateUser() {}
const updateUser = () => {
user.gender = '男' //界面可以更新渲染,而且这个数据最终也添加到了obj对象了
delete user.age //界面更新渲染了, obj中缺失没有了age这个属性
}
return {
user,
updateUser
}
在vue3中依然可以使用vue2中的data, methods等方法,建议使用setup
