vue3과 vue2 구문의 차이점은 무엇입니까
vue3과 vue2의 구문 차이: 1. vue2는 webpack을 사용하여 프로젝트를 빌드하는 반면 vue3은 vite를 사용하여 프로젝트를 빌드합니다. 2. vue2는 pototype 형식을 사용하여 작동할 수 있으며 생성자가 도입되는 반면 vue3은 구조의 형태를 사용하여 동작하는데 필요한 팩토리 기능을 도입한 것입니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, Vue3 버전, Dell G3 컴퓨터.
vue3과 vue2의 구문 차이점은 무엇입니까
1.webpack과 vite
vue2는 webpack 형식을 사용하여 프로젝트를 빌드합니다.
webpack은 항목 파일로 시작한 다음 라우팅을 분석한 다음 모듈을 만들고 마지막으로 압축한 다음 서버가 작업을 시작할 준비가 되었음을 알려줍니다.
vue3은 vite를 사용하여 프로젝트를 빌드합니다
먼저 서버가 준비되었음을 알리고 HTTP 요청을 보낼 때까지 기다립니다. 그런 다음 항목 파일, 동적 가져오기(동적 가져오기) 코드 분할 지점(코드 분할)
의 가장 큰 장점이자 차이점은 프로젝트의 일부 코드 파일을 더 빠르게 저장하고 업데이트하여 나중에 실제 효과를 확인할 수 있다는 것입니다. 소위 (핫 업데이트)
2 .main.js 파일
vue2에서 프로토타입(프로토타입) 형식을 사용하여 작동할 수 있습니다. 생성자
vue3은 구조 형식을 사용해야 작동합니다. . 공장 기능
vue3이 도입되었습니다. 앱 구성 요소
3. 설정 기능은 <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<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>
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.

vue.js에서 JS 파일을 참조하는 세 가지 방법이 있습니다. & lt; script & gt; 꼬리표;; mounted () 라이프 사이클 후크를 사용한 동적 가져 오기; Vuex State Management Library를 통해 수입.

vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.

VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 관리하고 유지 관리 할 수 있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.

vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.

vue.js가 트래버스 어레이 및 객체에 대한 세 가지 일반적인 방법이 있습니다. V- 결합 지시문은 V-FOR와 함께 사용하여 각 요소의 속성 값을 동적으로 설정할 수 있습니다. .MAP 메소드는 배열 요소를 새 배열로 변환 할 수 있습니다.

VUE에서 태그의 점프를 구현하는 방법에는 다음이 포함됩니다. HTML 템플릿의 A 태그를 사용하여 HREF 속성을 지정합니다. VUE 라우팅의 라우터 링크 구성 요소를 사용하십시오. javaScript 에서이. $ router.push () 메소드를 사용하십시오. 매개 변수는 쿼리 매개 변수를 통해 전달 될 수 있으며 동적 점프를 위해 라우터 옵션에서 경로가 구성됩니다.
