I. 소개:
Vue3와 Vue2의 비교:
- 성능 향상: Vue3는 Vue를 완전히 리팩터링하는 프레임워크입니다. 새 프레임. 하단 레이어는 TS를 재구성에 사용하며 성능 향상은 100%에 도달할 수 있습니다.
- TS 지원을 위해 Vue3의 하단 레이어는 기본적으로 개발을 위해 TS를 사용합니다. 저희 Vue 개발 과정에서는 일반적으로 기본적으로 TS와 조합하여 사용합니다.
- Vue3는 현재 vite 도구(xxx) 팀이 자체적으로 출시한 패키지인 새로운 패키징 도구를 사용하여 프로젝트를 생성합니다. 목표는 웹팩을 죽입니다
- 개발용 통합 API 및 반응형 API 추가(후크 프로그래밍)
vue3의 장점:
더 빠르게: vue3는 가상 돔을 다시 작성합니다. 훨씬 더 빨리
작게: 프로젝트에서 사용되지 않는 코드인 트리 쉐이킹 기술이 추가되었습니다. 포장은 기본적으로 제거됩니다.
더 쉬운 유지 관리: Flow에서 TypeScript로 변경하면 코드가 더 표준화됩니다.
Vue2는 더 이상 업데이트되지 않으므로 vue3 프로그래밍을 마스터하는 것이 유익하고 무해합니다.
2. 먼저 vue3에 속한 플러그인을 vscode에 설치해야 합니다.
그런 다음 vue2 플러그인을 비활성화해야 합니다: (그렇지 않으면 vue3 프로젝트가 인기를 얻게 됩니다)
참고: vue2와 vue3 프로젝트를 동시에 개발해야 하는 경우 vue3에 대한 작업 공간을 설정하고 작업 공간에서 vetur를 비활성화할 수 있습니다.
3. 프로그래밍에서 vue2와 vue3의 차이점:
1. Vue3에서는 동시에 템플릿 태그 아래에 여러 태그 생성을 지원할 수 있습니다.
<template>
<div>345</div>
<div>333</div>
<p>123</p>
</template>Vue3는 React의 Fragment와 유사한 기술을 도입합니다. 앞으로는 템플릿에 루트 태그를 만들 필요가 없습니다. Fragment는 기본적으로 페이지 처리에 사용됩니다.
2,
<script lang='ts' setup>
</script>이 태그 위에 있는 lang="ts"는 앞으로 이 스크립트 태그에서 ts 코드를 지원할 수 있음을 의미합니다. 나중에 패키징할 때 script 태그의 콘텐츠는 기본적으로 js 코드로 구문 분석됩니다.
Steup: Vue3는 프로그래밍을 위해 새로운 API를 사용합니다. 이러한 API가 프레임워크에서 인식되려면 스크립트 태그에 steup 플래그를 추가해야 vue3의 구문을 패키징하고 렌더링할 수 있습니다.
3. Vue3 프로젝트에서 생성 프로젝트는 기본적으로 less 및 scss를 지원하지 않습니다. 이 두 가지 기술을 사용하려면 종속성 패키지를 직접 내려야 합니다.
<style lang='scss' scoped>
.box {
.h3 {
color: red;
}
}
</style>4. 구성 요소 도입 방법:
Vue3 프로젝트에서 외부 구성 요소, 구성 요소 폴더 구성 요소를 도입해야 합니다.
특징:
- 구성 요소를 도입한 후 페이지에 직접 등록하고 렌더링할 필요가 없습니다.
- src/components 폴더는 기본적으로 로드되어 있으며 이 폴더 아래의 구성 요소는 전역으로 가져올 수 있습니다.
중요한 구성 요소를 가져올 필요가 없으며 특정 구성 요소가 기본적으로 사용되며 src/components로 직접 이동하여 찾으십시오.
<template>
<h3>这是App</h3>
<Product></Product>
<User></User>
</template>
<script lang='ts' setup>
</script>
<style lang='scss' scoped>
.box {
.h3 {
color: red;
}
}
</style>5. 결합된 api-ref는 vue3에서 제공됩니다.
ref는 구성 요소의 내부 데이터를 정의하기 위해 프로젝트에 도입해야 하는 결합된 API입니다.
import {ref} from "vue"
ref를 통한 내부 데이터 정의
<template>
<div>
<h3>Reactive</h3>
<p>{
{count}}</p>
<button @click="count=100">修改</button>
<!-- 只要在template输出这个对象，默认调用value -->
<p>{
{username}}</p>
<button @click="changeUsername">修改username</button>
</div>
</template>
<script lang='ts' setup>
// 定义组件内部数据
import {ref} from "vue"
// 定义一个基本数据类型,useState
const count = ref(50)
const username = ref("xiaowang")
// 函数直接定义script标签里面
const changeUsername = ()=>{
console.log(username);
// username得到的不是一个普通数据类型，而是一个对象。
username.value = "xiaofeifei"
}
</script>
<style lang='less' scoped>
</style>스크립트 태그에 현재 정의된 변수를 가져오거나 수정하려면 对象.value필요한 방식으로 구현 해야 합니다.
그러나 템플릿 태그에서 ref로 정의된 변수를 직접 사용할 수 있습니다.
6. 결합된 api -reactive는 vue3에서 제공됩니다.
리액티브 정의 데이터는 ref와 조금 다르며 모든 데이터를 객체로 정의할 수 있어 호출하기 편리합니다.
<template>
<div>
<h3>Reactive</h3>
<p>{
{state.count}}</p>
<p>{
{state.user}}</p>
<button @click="++state.count">+</button>
<button @click="--state.count">-</button>
</div>
</template>
<script lang='ts' setup>
import { reactive } from 'vue';
/**
* reactive定义组件内部数据
* 类似于React 类组件 State
*/
const state = reactive({
count:10,
user:{
id:1,name:"xiaowang"
},
stus:[1,2,3]
})
</script>
<style lang='less' scoped>
</style>제안:
ref를 사용하여 정의하는 기본 데이터 유형
우리가 정의하기 위해 반응형을 사용하는 참조 유형 데이터
Reactive에서 정의한 데이터는 수정할 때 값을 수정할 필요 없이 직접 값을 변경하면 됩니다.
7. 계산된 속성
Vue2의 계산된 속성
export default {
computed:{
fullName(){
return this.firstName + this.lastName
}
}
}Vue3에서 제공하는 모든 오퍼레이션은 결합된 API 형태로 제공됩니다.
계산된 속성을 구현하려면 계산된 속성 작업을 수행하기 위해 계산된 속성 모듈도 가져와야 합니다.
<template>
<div>
<h3>
computed
</h3>
<p>{
{fullName}}</p>
<button @click="state.firstName='老'">修改姓</button>
</div>
</template>
<script lang='ts' setup>
import { reactive,ref,computed} from 'vue'
const state = reactive({
firstName:"小",
lastName:"王"
})
const fullName = computed(()=>{
return state.firstName + state.lastName
})
</script>
<style lang='less' scoped>
</style>계산된 속성도 결합된 API로 캡슐화되며 계산된 속성 비즈니스를 수행하기 위해 이 API를 도입해야 합니다.
compute는 함수로 캡슐화됩니다. 속성을 계산해야 할 때 이 함수를 호출하여 결과를 얻습니다.
이 프로그래밍 방법은 후크 프로그래밍에 더 편향되어 있습니다.
문법 2:
<template>
<div>
<h3>
computed
</h3>
<p>{
{fullName}}</p>
<p>{
{upperCaseName}}</p>
<p>{
{newValue}}</p>
<button @click="newValue='zhang'">修改newValue</button>
<button @click="state.firstName='老'">修改姓</button>
</div>
</template>
<script lang='ts' setup>
import { reactive,ref,computed} from 'vue'
const state = reactive({
firstName:"小",
lastName:"wang"
})
const newValue = computed({
get(){
console.log(123);
return state.lastName
},
set(val){
console.log(val);
}
})
</script>
<style lang='less' scoped>
</style>Syntax 2는 상대적으로 거의 사용되지 않으며 계산된 속성의 값은 일반적으로 얻어 사용되며 거의 수정되지 않는다.
8、시계
Vue2 구문
export default {
data(){
return {
username:"xiaowang"
}
},
watch:{
username:{
//当我们监控的username发生变化的时候，默认执行handler
handler(value){
}，
deep:true,
immediate:true
}
}
}Vue3의 시계도 api 형태로 제공됩니다.
<template>
<div>
<h3>watch模块</h3>
<p>原始数据：{
{state.username}}</p>
<p>{
{state.user}}</p>
<button @click="state.username = 'xiaofeifei'">修改username</button>
<button @click="state.user.name = 'xiaoliu'">修改user</button>
</div>
</template>
<script lang='ts' setup>
import { reactive,ref,watch} from 'vue'
const state = reactive({
username:"xiaowang",
user:{
id:1,name:"王二麻子"
}
})
// 监听watch模块
// 第一个回调函数，要监控的属性是哪些。
// 第二个回调函数，数据发生变化，要执行业务
watch(
()=>state.username,
(val,prevVal)=>{
console.log(val);
console.log(prevVal);
}
)
</script>
<style lang='less' scoped>
</style>사용자 개체를 모니터링하려면
레퍼런스 타입의 데이터를 모니터링하고 싶을 때. 깊은 경청과 즉각적인 경청의 필요성
세 번째 매개변수: 객체 제공, 객체에 deep: true, Immediate: true 추가
watch(
() => state.user,
(val, prevVal) => {
console.log(val);
console.log(prevVal);
},
{
deep:true,
immediate:true
}
)9. watchEffect 기능
Reactive는 종속성을 추적하고 변경 사항이 감지되는 즉시 콜백을 실행합니다.
watchEffect와 watch는 모두 페이지를 모니터링하는 데 사용됩니다.
watchEffect는 리액티브에서 특정 속성을 사용하는 콜백 함수를 제공합니다. 이러한 속성이 변경되는 한 모니터링할 수 있습니다.
watchEffect(()=>{
// 里面可以执行异步请求，日志记录等等
console.log(state.username);
// 监控user这个对象地址发生变化，里面属性变化检测
console.log(state.user);
// 使用了user对象里面某个属性才能监控到
console.log(state.user.name);
})wactEffect에서 사용되는 변수가 변경될 때만 모니터링할 수 있습니다.
유형 데이터를 참조하는 경우 주소의 변경 사항만 모니터링할 수 있습니다. 참조 유형의 속성을 모니터링하도록 지정되지 않은 경우
watchEffect는 한 번에 많은 속성을 모니터링할 수 있습니다.
10. 주기적 함수 선언
VUE2에서는 주기적 함수를 직접 사용할 수 있다고 선언합니다.
export default {
mounted(){
},
created(){
}
}Vue3의 모든 선언 주기 함수를 가져와서 사용해야 합니다.
<template>
<div>
<h3>
声明周期函数
</h3>
</div>
</template>
<script lang='ts' setup>
import { reactive,ref,onMounted} from 'vue'
onMounted(()=>{
console.log("页面挂载完成后执行");
})
</script>
<style lang='less' scoped>
</style>옵션 API와 Vue 결합 API 기능의 차이점:
| 선택적 API | 후크 내부 setup |
|---|---|
beforeCreate |
필요하지 않음 |
created |
필요하지 않음 |
beforeMount |
onBeforeMount |
mounted |
onMounted |
beforeUpdate |
onBeforeUpdate |
updated |
onUpdated |
beforeDestory |
onBeforeUnmount |
| 파괴 | onUnmounted |
errorCaptured |
onErrorCaptured |
renderTracked |
onRenderTracked |
renderTriggered |
onRenderTriggered |
11. 친자 컴포넌트 값 전달 방식
vue2와 vue3의 부모-자식 구성 요소는 매개 변수를 전달하는 방법이 다르지만 길이가 너무 길어서 새 기사를 열었습니다.
Vue2 컴포넌트 패스 매개변수:
vue2 부모-자식 구성 요소의 매개 변수 전달 방법 요약 - 예언자 악마 블로그 - CSDN 블로그
vue3 컴포넌트 전달 매개변수:
Vue3-상위 구성 요소와 하위 구성 요소 간의 통신 실현(상세 + 소스 코드) - Prophet demons' Blog - CSDN Blog
12. 필터 필터
13. vue3에서 객체를 얻으려고 할 때 객체의 값을 직접 출력하지 않고 프록시
자세한 내용은 다음을 참조하십시오.
vue3가 객체의 값을 가져오면 프록시입니다.필요한 실제 값을 얻는 방법_Prophet demons' Blog-CSDN Blog
14. 그림의 동적 가져오기 방법
vue2에서 정적 리소스의 동적 도입은 require('경로')를 사용하지만 vue3에서는 require를 사용할 수 없습니다.
자세한 내용은 다음을 참조하십시오.