建网站的小软件,绍兴做网站的公司,一个完整的网站设计需要的技术,地板网站建设1.Vue3简介以及Vue3带来了什么
2.创建Vue3.0工程并分析Vue3工程结构
3.setup函数
4.ref函数
5.reactive函数
一.Vue3简介以及Vue3带来了什么
① Vue3简介 2020年9月18日#xff0c;Vue.js发布3.0版本#xff0c;代号#xff1a;One Piece#xff08;海贼王#xff0…1.Vue3简介以及Vue3带来了什么
2.创建Vue3.0工程并分析Vue3工程结构
3.setup函数
4.ref函数
5.reactive函数
一.Vue3简介以及Vue3带来了什么
① Vue3简介 2020年9月18日Vue.js发布3.0版本代号One Piece海贼王 耗时2年多、2600次提交、30个RFC、600次PR、99位贡献者 github上的tags地址https://github.com/vuejs/vue-next/releases/tag/v3.0.0
② Vue3带来了什么
1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% ......
2.源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking ......
3.拥抱TypeScript Vue3可以更好的支持TypeScript
4.新的特性 Composition API组合API setup配置 ref与reactive watch与watchEffect provide与inject ...... 新的内置组件 Fragment Teleport Suspense 其他改变 新的生命周期钩子 data 选项应始终被声明为一个函数 移除keyCode支持作为 v-on 的修饰符 ...... 二.创建Vue3.0工程并分析Vue3工程结构
① 使用vue-cli初始化这个工程 ## 查看vue/cli版本确保vue/cli版本在4.5.0以上 vue --version ## 安装或者升级你的vue/cli npm install -g vue/cli ## 创建 vue create vue_test ## 启动 cd vue_test npm run serve ② 使用vite创建
官方文档https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网https://vitejs.cn 什么是vite—— 新一代前端构建工具。 优势如下 开发环境中无需打包操作可快速的冷启动。 轻量快速的热重载HMR。 真正的按需编译不再等待整个应用编译完成。 ## 创建工程 npm init vite-app project-name ## 进入工程目录 cd project-name ## 安装依赖 npm install ## 运行 npm run dev ③ Vue3工程结构分析
main.js
// 引入的不再是Vue构造函数引入的是一个createApp的工厂函数import { createApp } from vue
import App from ./App.vue// 创建应用实例对象 -app(类似于vue2中的vm, 但app比vm更“轻”)
createApp(App).mount(#app)
vue3中可以没有根标签
template!-- vue3组件中的模板结构可以没有根标签 --img altVue logo src./assets/logo.png /HelloWorld msgWelcome to Your Vue.js App /
/template
④ Vue3开发者工具安装
1找到开发者工具离线安装包 2进入浏览器拓展程序将离线安装包拖进去点击添加拓展程序打开开关 三.setup函数
① 理解Vue3.0中一个新的配置项值是一个函数
② setup是所有组合API表演的舞台
③ 组件中所用到的数据方法等均要配置在setup中需要返回值
④ setup函数的两种返回值
1若返回一个对象则对象中的属性方法在模板中均可以直接使用
2若返回一个渲染函数则可以自定义渲染内容 export default {name: App,data () {return {sex: 男,a: 100}},methods: {sayWelcome () {alert(欢迎来到尚硅谷学习)},test1 () {console.log(this.name)console.log(this.age)console.log(this.sayHello)}},setup () {let name 张三let age 18// 如果重名setup优先let a 200function sayHello () {alert(我叫${name}, 我${age}岁了你好)}function test2 () {console.log(name)console.log(age)console.log(this.sex)console.log(this.sayWelcome)}// 返回一个对象return {name,age,sayHello,test2,a}// 直接使用了一个渲染函数// return () h(h1, 尚硅谷)}
} ⑤ 注意点
Vue2.x 配置中可以访问到setup中的属性和方法但是在setup中不能访问到Vue2.x配置和方法如果有重名setup优先setup不能是一个async函数因为返回值不再是return的对象, 而是promise模板看不到return对象中的属性
四.ref函数
① 作用构建响应式数据
② 引入import { ref } from vue
③ 语法
1 创建一个响应式数据的引用对象 2 修改数据通过value数据进行修改 3 在模板中读取的时候不需要加value 4备注
接收的数据可以是基本类型也可以是对象类型基本类型的数据响应式依然是靠Object.defineProperty()的get和set完成的对象类型的数据内部“求助了”Vue3.0中的一个新函数 ---reactive函数
五.reactive函数 作用定义一个对象类型的响应式数据基本类型不要用它用ref函数 reactive定义的响应式数据是“深层次的”const 代理对象 reactive(源对象) 接收一个对象或数组返回一个代理对象Proxy对象语法
① 创建一个响应式对象 ② 修改数据 ③ 在模板中使用
