vue3工程创建
一.两种创建方式(vue-cli与vite)
1.vue-cli创建(构建工具是webpack)
打开cmd 运行命令 vue -V 检查vue-cli版本要在4.5以上。
cd desktop 进入桌面 创建一个文件夹 vue create vue3lx 此时创建成功。y
2.运用vite创建(新一代前端构建工具)
对比webpack有如下的优势
1.开发环境中无需打包操作,可快速冷启动。(注意这里说的是开发环境的打包,就是不像之前的webpack需要npm run serve)
2.轻量快速的热加载。(虽然webpack也有这个功能,但是这个更加轻量快速)
3.按需编译,不用等像之前的webpack一样先全部打包,而是需要啥加载啥。
第一步
还是进入desktop 创建文件 npm init vite-app vue3_vite
此时会跳出这个
以前的webpack 是会创建之后自动给你下载依赖,这里需要自己进入并下载依赖。
cd vue3_vite 进入文件
然后npm install 去下载依赖 之后就可以通过npm run dev 打开就行了。
二.这里我们将讨论用vue-cli创建的vue3项目。
这里先打开vue3用cli创建的文件,并分析入口文件
然后根据入口文件执行顺序接下来分析,app组件
app组件主要改变时,模板中可以没有根标签,而vue2必须得有。其他没啥变化。
2.接下来可以去安装一个vue3的浏览器插件也就是vue3的开发者工具。
3.学习内容第一步 关注setup函数
setup是所有组合式api表演的舞台,也就是说数据和方法等都要在setup里面配置,setup函数里面不用像vue2一样要用this,因为都在setup里面的同一个作用域中。
setup有两种返回值
1)返回一个对象,则对象中的方法与属性在模板中都可以用到。
2)若返回一个渲染函数,则可以自定义渲染内容。
vue3与vue2最好不要混用。
4.学习如何操作响应式数据 不同于vue2,vue3要通过引入ref函数来实现包裹数据使数据能够成为引用对象。import {ref} from "vue"
ref作用:定义了一个响应式的数据。
值得注意的是:定义一个响应式数据是这样子定义的,let name = ref("刘浩") let age = ref(18) reference引用;参考
修改的话得 name.value = '李四' age.value = 18
ref接受的数据可以是基本数据类型也可以是对象数据类型
但是基本数据类型的响应式还是采用了Object.defineProperty()的get与set完成的,对象数据类型是采用vue3的新函数reactive()实现,它是由es6中的proxy封装的。
5.reactive()函数,作用:定义了一个对象类型的响应式数据,(基本数据类型不要用它定义)它是基于es6的proxy,通过代理对象操作源对象内部数据进行操作。
6.分析一下vue2的问题以及响应式:
实现原理:vue2对象类型是通过Objiect.defineproperty()对属性的读取与修改进行拦截(数据劫持),数组类型:通过重写更新数组的一些方法来实现拦截(对数组的变更方法进行了包裹)
存在的问题:1)新增属性与删除属性,不具有响应式。2)直接通过下表去修改数组不具备响应式。
解决方案:通过this.$set(增加到哪,属性名,属性值)或者Vue.set(增加到哪,属性名,属性值) 数组的话也可以用前两种,当然也可以调用数组的一些方法来修改。
7.分析一下vue3的响应式原理
对象响应式的响应式是引入reactive()函数,它底层是基于proxy代理实现的响应式,通过proxy代理去拦截任意属性的变化,包括元素的读写、属性的添加、属性的删除等。还通过reflect反射,对源对象的属性进行操作。
8.ref与reactive对比
9.setup()函数的两个注意点: 注意vue2种props是用来父传子一些数据,vue2可声明接收,也可以不声明接收,在$attrs里面有(捡漏的)。$solt
1)setup()的执行时间:在beforecreate()生命周期钩子之前执行一次,this的话是undefined。
2)setup的参数:
1.props:值为对象,组件外部传递过来的,且内部要声明接收了的属性。
2.context:上下文对象 里面有attrs:值为对象,包含组件外部传递过来的,且没有在props配置中声明的属性,相当于this.$attrs
slots:收到的插槽内容,相当于this.$slots emit:分发自定义事件的函数,相当于this.$emit.
10.计算属性
11.watch属性需要注意的点,一般在生产中用第三点就可以了,只不过不能获取到oldvalue,这时候只能把它用ref单独拎出去。
12.watchEffect()函数
13.生命周期(vue3生命周期钩子可以用配置项写也可以用setup()写也就是组合式api的方式写)
对比vue2只不过改了后面两个生命周期钩子,分别是beforeDestory和destoryed改为beforeunmount与unmounted
还有 beforeCreate与create都变成了setup(), vue3中可以将生命周期钩子写入setup()函数平台内,只不过得在名称前面多加一个on
14.hook()函数
它本质上就是一个函数,把setup里面的组合式api比如数据、ref、生命周期钩子函数、计算属性与监视等等封装在一起。
它又类似于vue2中的混入mixin
它的优点或者优势是,复用代码,让setup中的逻辑更加清晰。
15.toref()与torefs() 目的:为了抽取出来个别属性,还有为了简化模板的书写。
16.其他组合式api
17.readonly与shallowReadonly
18.toRow与markRow
19.customRef 自定义ref
20.provide与inject
21.响应式数据的判断
22.组合式api与选项配置api存在的问题
第五章 23.新的组件
24.teleport组件
25.suspence组件
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析