首先简单介绍一下vue3和vue的区别,
vue2
的绝大多数的特性 在 Vue3
都能使用,毕竟 Vue
是渐进式的
响应式原理进行使用 Proxy
实现,v-model
可以传参了等等新特性
1,首先是基本工作,创建vue3项目,要保障电脑安装node.js的前提下,才能使用npm 命令,创建一个就可以,后面再创项目直接使用vite打包工具
# npm
npm install -g @vue/cli
# yarn
yarn global add @vue/cli
npm init vite-app 项目名
cd 项目名
npm install
npm run dev
Vue3项目目录
- src/
- assets/ // 存放静态资源文件,如图片、样式等
- components/ // 存放可复用的Vue组件
- views/ // 存放页面级的Vue组件
- router/ // 存放Vue Router的路由配置文件
- store/ // 存放Vuex的状态管理文件
- services/ // 存放与后端API交互的服务文件
- utils/ // 存放通用的工具函数文件
- App.vue // 应用的根组件
- main.js // Vue应用的入口文件
- public/
- index.html // 应用的入口HTML文件
- package.json // 项目的配置信息和依赖项管理文件
2,Vue3是组合式API,Vue2是分散式API;
在 Vue2.X 我们使用的是 OptionAPI 里面有我们熟悉的 data
、computed
、methods
、watch
...
在 Vue3
中,我们依旧可以使用 OptionAPI当然不建议 和 Vue3
混用
在 Vue2
中,我们实现一个功能得分到不同的地方,把数据放在 data
,computed
方法放在 methods
里面,分开的太散乱了,几个功能还好,几十个上百个,那就有点...
所以 Vue3
提出了 Composition API ,它可以把 一个逻辑的代码都收集在一起
单独写个hook
,然后再引入,这样就不到处分布,显得很乱了
3,setup
是vue3中的一个新的配置项,值为一个函数,我们在组件中用到的数据、方法等等,都要配置在setup中。它在beforeCreate
之前执行一次,beforeCreate
这个钩子 的任务就是初始化,在它之前执行,那么 this
就没有被初始化 this = undefined
这样就不能通过 this
来调用方法 和 获取属性。
4,新增了ref,reactive两个用来实现响应式数据的
值类型 vs 引用类型:
ref:ref用于创建一个包装了值类型的响应式引用。它接受一个初始值作为参数,并返回一个对象,其中value属性包含了初始值。可以通过value属性获取或修改值。
reactive:reactive用于创建引用类型的响应式对象。它接受一个普通对象或数组作为参数,并返回一个响应式代理对象。可以直接通过访问或修改属性来操作数据。
自动解包 vs 手动解包:
ref:ref对象的值可以通过value属性直接访问或修改。当在模板中使用ref时,它会自动解包,不需要额外的操作。
reactive:reactive对象的属性需要手动解包,即使用.value来访问或修改。这是因为reactive对象本身是一个代理,所以需要显式解包。
总的来说,reactive更适合处理复杂的数据结构,而ref更适合处理简单的数据类型。
5,watch和computed监听和计算属性;
watch:既要指明监视的属性,也要指明监视的回调,watch里面执行的是一个回调函数,第一个参数是监听的对象或者数组,第二是回调函数,里面有newValue和oldValue,一个是新值,一个是旧值,后面还会有一个对象,里面可以配置深度监听deep:true,立即执行immediate:true。
watchEffect:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性,回调函数里面引用那个数据,就监听那个
watchEffect跟computed类似,区别有:
computed注重的计算出来的结果(回调函数的返回值),所以必须要return;
而watchEffect更注重的是过程(回调函数的函数体),所以不用return;
//computed计算属性有两种写法,简写是只读的
const dnum = computed(()=>num.value*2)
//完整写法,有get和set两个方法,比如全选与反选,反选就是要获取到allcheck的值,需要用到get
//全选就需要用到set,回调函数里面会传入一个allcheck的值
const allchecked = computed({
get :()=>{
return produceList.value.every(item=>item.check)//反选
},
set: (value)=>{
console.log(value);
produceList.value.forEach(item=>item.value = value)//全选
}
})
//watch
watch(num,(newValue,oldValue)=>{
console.log("num发生变化了",newValue,oldValue)
},{deep:true})
//(newValue,oldValue)如果这里面只写一个默认是新值,也就是newValue
//stop是事件,当触发该事件时,停止监听
const stop = watch(list,newValue=>{
console.log("list发生变化了",newValue)
},{可以配置选项})
//watchEffect
watchEffect(()=>{
//只要这里面引用的数据发生变化时都会触发这个回调函数
console.log("num",num.value)
},{})
6,生命周期
Vue.js 3在生命周期方面对Vue.js 2进行了一些调整和改进,以提供更加一致且灵活的使用体验。通过引入新的生命周期钩子函数和使用setup
函数作为Vue组件的入口点,Vue.js 3提供了更直观和清晰的生命周期管理方式。