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组件

 

posted @   kyming  阅读(142)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示