목차
vue3과 vue2의 구문 차이점은 무엇입니까
웹 프론트엔드 프런트엔드 Q&A vue3과 vue2 구문의 차이점은 무엇입니까

vue3과 vue2 구문의 차이점은 무엇입니까

Jun 23, 2022 pm 05:17 PM
vue

vue3과 vue2의 구문 차이: 1. vue2는 webpack을 사용하여 프로젝트를 빌드하는 반면 vue3은 vite를 사용하여 프로젝트를 빌드합니다. 2. vue2는 pototype 형식을 사용하여 작동할 수 있으며 생성자가 도입되는 반면 vue3은 구조의 형태를 사용하여 동작하는데 필요한 팩토리 기능을 도입한 것입니다.

vue3과 vue2 구문의 차이점은 무엇입니까

이 튜토리얼의 운영 환경: 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: &#39;appName&#39;,
  setup(){
  //变量
   let name = &#39;打工仔&#39;
   let age = 18
   //方法
   function say(){
    console.log(`我只是一个${name},今年${age}岁`)
   }
   //返回一个对象
   return {
    name,
    age,
    say
   }
  }
 }
</script>
로그인 후 복사
를 반환해야 합니다. ${name}은 이것을 작동하는데 사용할 필요가 없습니다. 이 함수는 단지 특정 범위의 변수를 가져오는 함수이고 설정 함수는 현재 이 범위에만 있는 함수를 제공합니다

지금은 매우 기분이 좋지 않습니다. . 내가 정의한 모든 변수와 메소드가 반환되어야 한다는 뜻이 아닌가요? 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 &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;中介&#39;)
    let age = ref(18)
    console.log(name)
    console.log(age)
    //方法
    function say(){
      name=&#39;波妞&#39;
      age=18
    }
    return {
      name,
      age,
      say
    }
  }
}
</script>
로그인 후 복사
이 경우 페이지를 수정합니다. {{name.value}를 표시할 필요는 없습니다. } 실제로 이렇게 될 필요는 없습니다. vue3에서는 ref가 객체임을 감지하고 ref 객체를 직접 정의하면 인스턴스가 refimpl이 됩니다. 이때 XX.value.XX를 사용하여 수정합니다
<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 &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;中介&#39;)
    let age = ref(18)
    let job=ref({
      occupation:&#39;程序员&#39;,
      salary:&#39;10k&#39;
    })
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.value.salary=&#39;12k&#39;
    }
    return {
      name,
      age,
      job,
      say
    }
  }
}
</script>
로그인 후 복사
이때 obj.value를 인쇄합니다. vue3의 하위 레이어가 프록시 객체이기 때문에 더 이상 refimpl 객체가 아니며 프록시 객체가 됩니다. 기본 데이터 유형 데이터 하이재킹은 Object.defineProperty의 get 및 set을 기반으로 수행됩니다. Vue3에는 ref

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 &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;波妞&#39;)
    let age = ref(18)
    let job=reactive({
      occupation:&#39;程序员&#39;,
      salary:&#39;10k&#39;
    })
    let hobby=reactive([&#39;吃饭&#39;,&#39;睡觉&#39;,&#39;打豆豆&#39;])
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.salary=&#39;12k&#39;
      hobby[0]=&#39;学习&#39;
    }
    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 &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let data=reactive({
      name:&#39;波妞&#39;,
      age:18,
      job:{
        occupation:&#39;程序员&#39;,
        salary:&#39;10k&#39;
      },
      hobby:[&#39;吃饭&#39;,&#39;睡觉&#39;,&#39;打豆豆&#39;]
    })
    //方法
    function say(){
      data.job.salary=&#39;12k&#39;
      data.hobby[0]=&#39;学习&#39;
    }
    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

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

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

Vue에서 부트 스트랩을 사용하는 방법 Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

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

Vue 용 버튼에 기능을 추가하는 방법 Vue 용 버튼에 기능을 추가하는 방법 Apr 08, 2025 am 08:51 AM

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

vue.js로 JS 파일을 참조하는 방법 vue.js로 JS 파일을 참조하는 방법 Apr 07, 2025 pm 11:27 PM

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

Vue에서 시계를 사용하는 방법 Vue에서 시계를 사용하는 방법 Apr 07, 2025 pm 11:36 PM

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

Vue 다중 페이지 개발은 무엇을 의미합니까? Vue 다중 페이지 개발은 무엇을 의미합니까? Apr 07, 2025 pm 11:57 PM

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

Vue가 이전 페이지로 돌아 오는 방법 Vue가 이전 페이지로 돌아 오는 방법 Apr 07, 2025 pm 11:30 PM

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

Vue Traversal 사용 방법 Vue Traversal 사용 방법 Apr 07, 2025 pm 11:48 PM

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

태그를 vue로 점프하는 방법 태그를 vue로 점프하는 방법 Apr 08, 2025 am 09:24 AM

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

See all articles