vue3과 vue2의 구문 차이: 1. vue2는 webpack을 사용하여 프로젝트를 빌드하는 반면 vue3은 vite를 사용하여 프로젝트를 빌드합니다. 2. vue2는 pototype 형식을 사용하여 작동할 수 있으며 생성자가 도입되는 반면 vue3은 구조의 형태를 사용하여 동작하는데 필요한 팩토리 기능을 도입한 것입니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, Vue3 버전, Dell G3 컴퓨터.
1.webpack과 vite
vue2는 webpack 형식을 사용하여 프로젝트를 빌드합니다.
webpack은 항목 파일로 시작한 다음 라우팅을 분석한 다음 모듈을 만들고 마지막으로 압축한 다음 서버가 작업을 시작할 준비가 되었음을 알려줍니다.
vue3은 vite를 사용하여 프로젝트를 빌드합니다
먼저 서버가 준비되었음을 알리고 HTTP 요청을 보낼 때까지 기다립니다. 그런 다음 항목 파일, 동적 가져오기(동적 가져오기) 코드 분할 지점(코드 분할)
의 가장 큰 장점이자 차이점은 프로젝트의 일부 코드 파일을 더 빠르게 저장하고 업데이트하여 나중에 실제 효과를 확인할 수 있다는 것입니다. 소위 (핫 업데이트)
2 .main.js 파일
vue2에서 프로토타입(프로토타입) 형식을 사용하여 작동할 수 있습니다. 생성자
vue3은 구조 형식을 사용해야 작동합니다. . 공장 기능
vue3이 도입되었습니다. 앱 구성 요소
3. 설정 기능은 를 반환해야 합니다. ${name}은 이것을 작동하는데 사용할 필요가 없습니다. 이 함수는 단지 특정 범위의 변수를 가져오는 함수이고 설정 함수는 현재 이 범위에만 있는 함수를 제공합니다<script>
export default {
name: 'appName',
setup(){
//变量
let name = '打工仔'
let age = 18
//方法
function say(){
console.log(`我只是一个${name},今年${age}岁`)
}
//返回一个对象
return {
name,
age,
say
}
}
}
</script>로그인 후 복사
지금은 매우 기분이 좋지 않습니다. . 내가 정의한 모든 변수와 메소드가 반환되어야 한다는 뜻이 아닌가요? Vue3에서는 와 같은 스크립트 태그에 설정을 추가하는 기능을 제공합니다. 컴파일 및 런타임 중 설정에서
참고: 설정은 beforeCreate 및 생성된 라이프 사이클보다 이전입니다. 즉, 이를 직접 사용하여 데이터에서 데이터를 가져오면 여전히 정의되지 않습니다
설정 구문 강의에서는 2를 받습니다. 매개변수 setup(props,context)
우리 모두는 이것을 알고 있습니다.$attrs, this.$slots in vue2 , this.$emit는 attrs, Slots, Emit in context
참고: 하나의 매개변수만 허용할 때 페이지에 경고 메시지가 표시되지만 사용에는 영향을 미치지 않습니다
4. 지침 및 슬롯
vue2 슬롯을 직접 사용할 수 있지만 v-slot은 vue3에서 사용해야 합니다. -if는 v-for 명령어보다 vue2에서 더 높은 우선순위를 가지며 함께 사용하는 것은 권장되지 않습니다. v- vue3 for 및 v-if는 현재 v-if를 v-의 판단문으로만 처리합니다. for, 서로 충돌하지 않습니다keyCode는 vue3에서 v-on의 수정자로 제거되었으며 물론 config.keyCodes는 지원되지 않습니다
vue3에서 v-on.native 수정자를 제거
vue3에서 필터 제거
5.ref 및active
ref
데이터를 반응형 데이터로 변환하고, ref는 이를 객체로 변환하며, 코드를 직접 조작하면 현재 이름과 나이를 수정할 수 없음을 알 수 있습니다. 여전히 get 및 set을 통해 페이지를 수정합니다. 이때 .value를 사용해야 하며 참조는 여전히 Refimpl이 경우 페이지를 수정합니다. {{name.value}를 표시할 필요는 없습니다. } 실제로 이렇게 될 필요는 없습니다. vue3에서는 ref가 객체임을 감지하고 ref 객체를 직접 정의하면 인스턴스가 refimpl이 됩니다. 이때 XX.value.XX를 사용하여 수정합니다<template>
<div class="home">
<h1>姓名：{{name}}</h1>
<h1>年龄：{{age}}</h1>
<button @click="say">修改</button>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'Home',
setup(){
let name = ref('中介')
let age = ref(18)
console.log(name)
console.log(age)
//方法
function say(){
name='波妞'
age=18
}
return {
name,
age,
say
}
}
}
</script>로그인 후 복사이때 obj.value를 인쇄합니다. vue3의 하위 레이어가 프록시 객체이기 때문에 더 이상 refimpl 객체가 아니며 프록시 객체가 됩니다. 기본 데이터 유형 데이터 하이재킹은 Object.defineProperty의 get 및 set을 기반으로 수행됩니다. Vue3에는 ref<template>
<div class="home">
<h1>姓名：{{name}}</h1>
<h1>年龄：{{age}}</h1>
<h2>职业：{{job.occupation}}</h2>
<h2>薪资：{{job.salary}}</h2>
<button @click="say">修改</button>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'Home',
setup(){
let name = ref('中介')
let age = ref(18)
let job=ref({
occupation:'程序员',
salary:'10k'
})
console.log(name)
console.log(age)
//方法
function say(){
job.value.salary='12k'
}
return {
name,
age,
job,
say
}
}
}
</script>로그인 후 복사
reactive
를 호출할 때 자동으로 반응성을 호출하는 것과 동일합니다. 반응형 객체를 프록시로 변환합니다. 이제 반응성을 통해 직접 프록시로 변환합니다.
<template>
<div class="home">
<h1>姓名：{{name}}</h1>
<h1>年龄：{{age}}</h1>
<h2>职业：{{job.occupation}}<br>薪资：{{job.salary}}</h2>
<h3>爱好：{{hobby[0]}},{{hobby[1]}},{{ hobby[2] }}</h3>
<button @click="say">修改</button>
</div>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
name: 'Home',
setup(){
let name = ref('波妞')
let age = ref(18)
let job=reactive({
occupation:'程序员',
salary:'10k'
})
let hobby=reactive(['吃饭','睡觉','打豆豆'])
console.log(name)
console.log(age)
//方法
function say(){
job.salary='12k'
hobby[0]='学习'
}
return {
name,
age,
job,
say,
hobby
}
}
}
</script>이때는 제공되는 .value를 사용하는 것이 더 좋습니다. ref. 괜찮은 것 같긴 한데 문제가 있는거 아닌가요. 데이터가 무리라면 매번 .value 에 가서 연기가 날 때까지 클릭할 필요는 없습니다. vue2에서 시뮬레이션된 데이터 형식을 사용하면 기분이 좋아질 것입니다.
<template>
<div class="home">
<h1>姓名：{{data.name}}</h1>
<h1>年龄：{{data.age}}</h1>
<h2>职业：{{data.job.occupation}}<br>薪资：{{data.job.salary}}</h2>
<h3>爱好：{{data.hobby[0]}},{{data.hobby[1]}},{{ data.hobby[2] }}</h3>
<button @click="say">修改</button>
</div>
</template>
<script>
import {reactive} from 'vue'
export default {
name: 'Home',
setup(){
let data=reactive({
name:'波妞',
age:18,
job:{
occupation:'程序员',
salary:'10k'
},
hobby:['吃饭','睡觉','打豆豆']
})
//方法
function say(){
data.job.salary='12k'
data.hobby[0]='学习'
}
return {
data,
say,
}
}
}
</script>ref와 반응형의 차이
ref는 기본 데이터 유형을 정의합니다.
ref는 Object.defineProperty()의 get 및 set을 통해 데이터 하이재킹을 구현합니다.
ref 읽을 때 필요하지 않은 data.value를 작동합니다. value
reactive는 객체 또는 배열 데이터 유형을 정의합니다.
reactive는 프록시를 통해 데이터 하이재킹을 구현합니다.
reactive 작업과 데이터 읽기는 필요하지 않습니다. value
6 vue2의 응답 원칙은 Object를 사용합니다. .defineProperty의 get 및 set은 응답성을 얻기 위해 데이터 하이재킹을 수행합니다. vue2에서는 속성을 읽고 수정하는 데 get 및 set 메서드만 사용되며 페이지는 실시간으로 업데이트되지 않습니다.直接通过下标改数组，页面也不会实时更新
vue3中响应式原理使用Proxy进行代理，使用window内置对象Reflect反射，学了Es6的语法的就知道我们在使用Proxy进行代理，好比甲方公司给出需要什么技术的前端攻城狮，让乙方去干招聘、面试等环节
Proxy可以拦截对象中任意的属性变化，当然包括读写，添加，删除等
Reflect对源对象属性进行操作
const p=new Proxy(data, {
// 读取属性时调用
get (target, propName) {
return Reflect.get(target, propName)
},
//修改属性或添加属性时调用
set (target, propName, value) {
return Reflect.set(target, propName, value)
},
//删除属性时调用
deleteProperty (target, propName) {
return Reflect.deleteProperty(target, propName)
}
})【相关推荐：《vue.js教程》】
위 내용은 vue3과 vue2 구문의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
