做网站吗,公司主页设计案例,网络服务有限公司,服务器代理第一章 基础篇
第二章 脚手架篇
vue2与vue3的一些区别
响应式系统#xff1a;
Vue 2 使用 Object.defineProperty 进行响应式数据的劫持和监听#xff0c;它对数据监听是一项项的进行监听#xff0c;因此#xff0c;当新增属性发生变化时#xff0c;它无法监测到
Vue 2 使用 Object.defineProperty 进行响应式数据的劫持和监听它对数据监听是一项项的进行监听因此当新增属性发生变化时它无法监测到并且响应性能不是很好。Vue 3 使用 Proxy 来实现响应式系统它用一个中间代理来管理所有的数据响应这使得它可以监听新增和删除的属性并且提供了更好的性能和扩展性。
组件实例 Vue 2 的组件实例使用 选项式 API将组件的逻辑拆分为不同的生命周期钩子函数随着组件复杂度的增加代码结构变得臃肿。 templatediv/div
/templatescript
export default {data() {return {};},methods: {},
};
/scriptVue 3 引入了 组合式 API通过 setup 函数来组织逻辑可以根据功能进行逻辑的组合提高了代码的可维护性和重用性。 templatediv/div
/templatescript setup/scriptstyle langscss scoped/style编译器 Vue 2 使用基于字符串的模板编译方式模板中的指令和插值表达式在编译阶段被转换成对应的 JavaScript 代码。 Vue 3 引入了编译器的静态标记利用更先进的编译技术如基于 AST 的编译提供了更好的性能和错误检查。 基于 AST抽象语法树的编译是一种常见的编译技术它将源代码转换为一个表示代码结构的树状数据结构。在编译过程中AST 用于分析、转换和生成代码。
性能优化
Vue 3 在编译和运行时都进行了一系列的性能优化比如更细粒度的更新跟踪、更高效的虚拟 DOM 算法等提供了更高的性能和更小的包体积。
TypeScript 支持
Vue 3 对 TypeScript 的支持更加友好它在编译器和 API 设计上进行了改进提供了更好的类型推导和类型检查。
Vue CLI Vue CLICommand Line Interface是一个用于快速开发 Vue.js 项目的官方脚手架工具。它提供了一套完整的项目脚手架包括构建、开发服务器、代码规范等帮助你快速搭建和管理 Vue.js 项目。 下载安装Vue CLI
npm install -g vue/cli
安装完成以后使用vue命令创建你的vue项目
vue create ny-project
运行完命令以后需要选择项目的一些配置依赖选择完毕以后回车Vue CLI就会帮我们创建一个vue项目cd到项目文件下运行 npm run server启动项目。
如果是第一次使用vueCLI创建项目可以先去B站找几个项目视频看一下会教你怎么选择依赖对项目文件进行解读。
Vite
Vite 是一个现代化的前端构建工具用于快速开发现代化的 Web 应用程序。它与传统的打包工具如Webpack不同使用了基于原生 ES 模块的开发服务器在开发过程中具有更快的冷启动时间和更高的性能。
Vite 针对现代浏览器进行了优化利用原生 ES 模块的特性可以直接在浏览器中执行模块而无需像传统方式那样将它们打包成一个或多个文件。这使得在开发过程中代码变更后的热重载速度非常快加快了开发者的反馈循环。
使用vite创建你的vue项目
npm create vitelatest
这个命令会检查本地是否有vite如果没有vite会提示您先下载vite脚手架然后输入项目名称选择项目依赖创建好项目文件目录后在项目目录下运行npm install下载依赖包即可创建好一个vue项目。
vite目录 组件基础
父子通信
父传子props
将属性props从父组件传递给子组件来实现父子之间的通信
示例
父组件
script setup
import HelloWorld from ./components/HelloWorld.vueconst myName qingtian
/scripttemplatediv{{ myName }}HelloWorld :myNamemyName //div
/templatestyle scoped/style子组件
script setup
import { defineProps } from vueconst props defineProps({myName: String
})
/scripttemplatediv名字{{ myName }}/div
/templatestyle langscss scoped/styletip
所有的props都遵循单向数据流即props会因父组件的更新而变化自然地将新的状态向下传递到子组件而不会再由子组件传递到父组件。因此要避免子组件意外的修改父组件的状况不然应用的数据流将很容易变得混乱。
props 属性验证与默认属性
子组件的需要接收的参数有类型要求但是父组件有可能并不知需要的类型错误属性类型传入会导致组件无法正常工作因此要对属性进行验证。属性验证是一种在组件中对传入的属性进行类型检查和有效性验证的机制。它可以确保组件在接收到正确类型和有效值的属性时能够正常工作并且能够及早地捕获和处理属性错误。
类型要求
const props defineProps({myName: String,age:Number
})validator验证器
test:{validator(value){return [String,Number....]}
}默认属性
通过设置default属性来为属性提供默认值。当父组件没有向子组件传递该属性时子组件将使用默认值作为属性的初始值。
const props defineProps ({name: {type: String,default: Qing Tian // 设置默认值为Qing Tian}})required
要求必须传递属性
const props defineProps ({name: {type: String,required:true // }})属性透传
透传的现象
!--父组件--
templatedivchildren classtest idtestId stylebackground-color: aqua; //div
/template
!--子组件--
templatediv测试透传现象/div
/template浏览器查看 属性透传Attribute Inheritance是一种机制它允许你在一个组件上定义的属性被传递到该组件的子组件上而无需在父组件和子组件之间显式声明这些属性。
优点 简化代码: 属性透传可以减少在父组件和子组件之间重复声明相同属性的代码量。父组件传递的属性会自动应用到子组件减少了代码的冗余。 更灵活的组合: 属性透传使得组件的组合更加灵活。父组件可以通过属性透传将自己的属性传递给子组件而不需要了解子组件内部的具体实现细节降低了组件之间的耦合性。 保持HTML特性: 如果父组件上使用了一些HTML特性例如class、style等属性透传可以确保这些特性传递到子组件使得子组件能够正确地渲染这些特性。
缺点 潜在的属性冲突: 属性透传可能导致属性冲突的问题。如果父组件和子组件都定义了相同的属性那么子组件将无法接收到父组件相应的属性值。这时需要通过适当的命名约定或其他方法来避免属性冲突。 隐藏了子组件的API: 属性透传可能会隐藏子组件的API。父组件可以将任意属性传递给子组件但这些属性对于子组件来说可能没有意义或不应该暴露给外部使用。这种情况下开发者需要做好文档和注释的工作以确保其他开发者正确使用组件。 增加了组件间的依赖性: 当父组件通过属性透传将属性传递给子组件时父组件和子组件之间会建立更紧密的依赖关系。这可能会导致代码难以维护和理解特别是当组件结构复杂、嵌套层级深时。
因此在开发过程中我们可能需要阻止掉这种行为以保证我们封装的子组件的纯洁。此时我们需要用到v-bind$attrs和inheritAttrs: false来帮助我们。一般来说父组件透传的属性都会集中到$attrs上面因此我们使用inheritAttrs: false阻止掉默认属性继承。在使用v-bind绑定到特定的元素上。
templatediv测试透传现象button v-bind$attrs按钮/button/div
/template
script setupinheritAttrsfalse,
/script子传父
通俗来讲子传父就是子组件需要向父组件传递某个参数或者调用父组件中的方法。因为单向数据流的存在我们不能让子组件直接修改父组件传递过来的数据因此需要有子传父的方法。需要明白的是父传子是不需要触发事件的但是子传父需要事件的触发才能开始。
子传父有一个固定的写法父组件中有一个自定义事件:event:handletest,子组件接收这个自定义事件this.$emit(event)
!--父组件--
templatedivChild eventhandTest/div
/template
script setupconst handTest (data){console.log(data)}
/script
!--子组件--
templatedivbutton clickchildClick/div
/template
script setupimport { defineEmits } from vue;const emits defineEmits([event]) ;const data test;const childClick () {emits(event, data);};
/scriptTip
在 Vue父子通信中props down event up
React父子通信只有props down props up
React中父传子与Vue一样但是子传父是通过将父组件的方法传给子组件来模拟实现的。其实也很好理解子传父就是子组件传递一个数据到父组件然后再把数据放到父组件的方法中使用所以React的处理就是直接把方法给到子组件。
一些不再被推荐或禁用的通信方法
$refs 父组件直接对子组件进行操作的方法
在vue3中已经改变为使用ref来创建响应式的对象
templatedivbutton refmyButton clickhandleClick点击按钮/button/div
/templatescript setup
import { ref } from vue;const myButton ref(null);const handleClick () {console.log(myButton.value); // 访问引用
};
/script$parent是指向父组件实例的引用不再推荐使用
$root是指向根组件实列的引用不再推荐使用
跨级通信
provideinject
中间人模式传递 provideinject模式提供注入
使用选项式API书写
//提供数据的祖宗组件
provide(){return {testdata}
}
//接收数据的子孙组件
inject:[testdata]需要注意的是provide 和 inject 并不是响应式的。也就是说如果提供的值发生变化并不会触发子组件的重新渲染。如果需要在子组件中实现响应式可以结合使用 props 和自定义事件来实现更灵活的通信方式。
使用组合式API书写
!--提供数据的祖宗组件--
script setupimport { ref, provide } from vueconst testdata ref(testdata)provide(testdata,testdata)
/script
!--接收数据的子孙组件--
script setup
import { inject } from vue
const message inject(testdata)
/script组合式API配合ref数据就是响应式的啦。
订阅发布模式
订阅发布模式是一种解耦组件之间通信的方法在项目中创建发布方法和订阅方法并暴露出来。当组件调用发布方法该组件就是一个发布者负责发布消息调用订阅方法的组件则成为订阅者订阅并接收感兴趣的消息。
在生态篇分享VueX和Pinia时会再重点描述此模式。
动态组件
动态组件可以根据不同的条件渲染不同的组件动态组件的关键是通过特殊的标签 component 来指定动态组件的渲染目标。可以将动态组件的名称绑定到一个变量或表达式上然后根据变量或表达式的值来决定要渲染哪个组件。
templatedivcomponent :iscomponents/componentbutton clickchange切换组件/button/div
/template
script setup
import {ref} from vue
import ComponentA from ./ComponentA;
import ComponentB from ./ComponentB; const components ref(ComponentA)const change (){components.value components.valueComponentA?ComponentB:ComponentA
}
/scriptkeep-alive
keepAlive在组件切换以后保持组件存活
templatedivkeepAlivecomponent :iscomponents/component/keepAlivekeep-alivecomponent :iscomponents/component/keep-alive/div
/template