Vue3.0 새로운 기능 및 사용 요약(정리 및 공유)

이 글은 vue3.0의 새로운 기능과 사용법 요약을 공유할 것입니다. 여기에는 몇 가지 새로운 변경 사항과 더 이상 사용할 수 없는 이전 구문이 포함되어 있습니다.

1. Vue3의 새로운 변경 사항

• 성능 개선(비용 없음: vue2에서 vue3으로 전환할 때 즐기세요)

  처음으로 빠른 렌더링, 더 빠른 diff 알고리즘, 더 적은 메모리 사용량, 패키징 더 작은 크기...

• 더 나은 Typescript 지원(vue에서 TS를 작성하는 것이 더 편리함)

• 새로운 코드 작성 방법 제공: Composition API

2. 구문은 더 이상 사용할 수 없습니다.

vue3.0은 버전 2.0의 구문 대부분과 호환되지만(이전에 작성된 방식은 지금도 정상적으로 작성됩니다), 일부 파괴적인 구문 업데이트도 있으므로 특별히 특별해야 합니다. 참고:

1 이제 vue 인스턴스(eventBusVue.prototype.$eventBus=new Vue(); this.$on('event name', callback)에서 $on 메서드를 제거했습니다. 구현 모드는 더 이상 지원되지 않으며 타사 플러그인으로 대체될 수 있습니다. 다음은 vue2의 eventBus 사용법입니다. Vue.prototype.$eventBus=new Vue(); this.$on('事件名'， 回调)现有实现模式不再支持，可以使用三方插件替代）。下边是vue2中eventBus的用法:

Vue.prototype.$eventBus = new Vue()
组件1
this.$on('事件名', 回调)
组件2
this.$emit('事件名')

 2、移除过滤器选项 。下边是vue2中过滤器的用法：

<div>{{ msg | format}}</div>
插值表达式里, 不能再使用过滤器filter， 可以使用methods替代
{{format(msg)}}

 3、移除 .sync语法（v-bind时不能使用.sync修饰符了，现在它v-model语法合并了）。下面是vue2中.sync的用法

<el-dialog :visibel.sync="showDialog"/>

3、vue2和3的项目区别

主要看三个位置：

• package.json

• main.js

• app.vue

package.json

首先我们可以看一下package.json文件，在dependencies配置项中显示，我们当前使用的版本为3

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.2.25"  // 版本号
}

main.js

然后打开main.js

import Vue from 'vue'
import App from './App.vue'
new Vue({render: h => h(App)}).$mount('#app')

2. 필터 옵션을 제거합니다. 다음은 vue2의 필터 사용법입니다.

import { createApp } from 'vue'
import App from './App.vue' // 根组件
createApp(App).mount('#app')

3. .sync 구문을 제거합니다(.sync 수정자는 v-bind에서 사용할 수 없으며 이제 v-model 구문과 병합됩니다). 다음은 vue2

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

에서 .sync의 사용법입니다. 3, vue2 및 3

프로젝트의 차이점은 주로 세 위치에 따라 다릅니다.

package.json

main.js

app .vue

package.json

먼저 package.json 파일을 살펴보면 현재 사용 중인 버전이 3

setup() {
	console.log('setup....', this)
},
beforeCreate() {
	console.log('beforeCreate') // 它比setup迟
}

임을 종속성 구성 항목에 표시합니다. main.js

그런 다음 main.js 항목 파일을 열면 Vue의 인스턴스화가 이전 새 키워드 인스턴스화에서 createApp 메서드의 호출 형식으로 일부 변경된 것을 확인할 수 있습니다.

vue2.x에서 작성하는 방법:

<template>
  <div class="container">
    姓名：{{name}}，月薪:{{salary}} <button @click="say">打个招呼</button>
  </div>
</template>
<script>
export default {
  setup () {
    console.log('setup执行了，这里没有this. this的值是：'， this)
 
    // 定义数据和函数
    const name = '小吴'
    const salary = 18000
    const say = () => {
      console.log('我是', name)
    }
 
    // 返回对象，给视图使用
    return { msg , say}
  },
  beforeCreate() {
    console.log('beforeCreate执行了， 这里有this，this的值是:',  this)
  }
}
</script>

vue3.x에서 작성하는 방법:

export default com ({
    setup(props, context) {
        const { uname } = props
        console.log(uname)
    },
})

app.vue

app.vue를 열고 다음을 확인하세요. vue3.0의 단일 파일 구성 요소에는 더 이상 고유한 파일 구성 요소가 필요하지 않습니다. 루트 요소

<template>
  <div class="container">
    <p>{{ num }}</p>
    <p>姓名： {{ user.uname }}</p>
    <p>年龄： {{ user.age }}</p>
  </div>
</template>
 
<script>
import { reactive, ref, toRefs } from "vue";
export default com({
  setup() {
    const num = ref(0);
    const user = reactive({ uname: "vivian", age: 18});
    setInterval(() => {
      num.value++;
      user.age++;
    }, 1000);
    return {
      year,
      user
    };
  },
});
</script>

4. Composition API 및 옵션 API

Composition API(Composition API)는 우리 개발자에게 매우 중요한 vue3 업데이트입니다.

• Vue2 옵션 API

  , 옵션 API(사진),
Vue3 결합 API
• , 구성 API(오른쪽 사진):

, 옵션 API:

장점:

이해하기 쉽고 사용하기 쉽습니다. . 각 옵션(구성 항목)에는 쓰기 위치가 고정되어 있기 때문에(예: 데이터 옵션에 데이터를 쓰고, 메서드에 연산 방법을 쓰는 등)

단점:

애플리케이션이 커지면 다들 그럴 거라고 믿습니다. 발생 코드를 위아래로 찾는 딜레마 – 수평으로 점프.

Vue3 컴포지션 API

, 컴포지션 API:

특징:

• 함수 A에 관련된 반응형 데이터, 데이터 운용 방식 등 특정 기능과 관련된 모든 것을 모아서 유지 관리합니다. , 이렇게 하면 애플리케이션의 크기에 관계없이 특정 기능에 관련된 모든 코드를 빠르게 찾을 수 있으므로 유지 관리 및 설정이 쉽습니다

• 기능이 복잡하고 코드의 양이 많은 경우, 논리적 분할 처리를 수행할 수도 있습니다.

                                                                                                                                                                                                API API를 사용합니다. vue3은 새로운 코드 작성 방식을 제공하므로(기존 방식도 사용 가능), vue2를 구별하기 위해 서로 다른 이름이 부여됩니다:

• Vue2 옵션 API(옵션 api) 장점: 간단함, 각 옵션이 각각 자체적으로 수행함 단점 : 함수코드 분산 유지, 코드 점프

Vue3 통합 API (합성 API) 장점 : 함수 코드 조합 유지, 편리한 함수 재사용
setup 기능은 컴포넌트에서 결합된 API의 시작점(입력) 역할을 하는 새로운 컴포넌트 옵션입니다.

setup은 이것을 사용할 수 없습니다. beforeCreate 수명 주기 후크가 실행되기 전에

• setup 함수가 실행되면
  🎜

  // 响应式数据：{ 属性1, 属性2 }
  let { 属性1, 属性2 } = toRefs(响应式数据)

  🎜🎜setup 매개변수: 🎜🎜🎜setup을 사용할 때 🎜🎜🎜🎜props: props는 다음과 같습니다. 상위 구성 요소에 의해 전달된 모든 소품 데이터를 포함하는 개체🎜

• context: context对象包含了attrs，slots， emit属性

返回值

这个函数的返回值是一个对象，在模版中需要使用的数据和函数，需要在这个对象中声明（如果在data()中也定义了同名的数据，则以setup()中为准）。

<template>
  <div class="container">
    姓名：{{name}}，月薪:{{salary}} <button @click="say">打个招呼</button>
  </div>
</template>
<script>
export default {
  setup () {
    console.log('setup执行了，这里没有this. this的值是：'， this)
 
    // 定义数据和函数
    const name = '小吴'
    const salary = 18000
    const say = () => {
      console.log('我是', name)
    }
 
    // 返回对象，给视图使用
    return { msg , say}
  },
  beforeCreate() {
    console.log('beforeCreate执行了， 这里有this，this的值是:',  this)
  }
}
</script>

setup 中接受的props是响应式的， 当传入新的 props 时，会及时被更新。由于是响应式的， 所以不可以使用 ES6 解构，解构会消除它的响应式。 错误代码示例， 这段代码会让 props 不再支持响应式：

export default com ({
    setup(props, context) {
        const { uname } = props
        console.log(uname)
    },
})

开发中我们想要使用解构，还能保持props的响应式，有没有办法解决呢?setup接受的第二个参数context，我们前面说了setup中不能访问 Vue2 中最常用的this对象，所以context中就提供了this中最常用的三个属性:attrs、slot 和emit，分别对应 Vue2.x 中的 $attrs属性、slot 插槽 和$emit发射事件。并且这几个属性都是自动同步最新的值，所以我们每次使用拿到的都是最新值。

5、reactive、ref 与 toRefs

在 vue2.x 中， 定义数据都是在data中， 但是 Vue3.x 可以使用 reactive 和 ref 来进行数据定义。

如何取舍ref和reactive？

定义响应式数据有两种方式：

• ref函数(可以处理简单数据，也可以处理复杂数据)，常用于将简单数据类型定义为响应式数据

  • 在代码中修改(或者获取)值时，需要补上.value

  • 在模板中使用时，可以省略.value

• reactive函数，常用于将复杂数据类型为响应式数据

推荐用法：

• 优先使用ref

• 如果明确知道对象中有什么属性，就使用reactive。例如，表单数据

接下来使用代码展示一下 ref、reactive的使用：

<template>
  <div class="container">
    <p>{{ num }}</p>
    <p>姓名： {{ user.uname }}</p>
    <p>年龄： {{ user.age }}</p>
  </div>
</template>
 
<script>
import { reactive, ref, toRefs } from "vue";
export default com({
  setup() {
    const num = ref(0);
    const user = reactive({ uname: "vivian", age: 18});
    setInterval(() => {
      num.value++;
      user.age++;
    }, 1000);
    return {
      year,
      user
    };
  },
});
</script>

上面的代码中，我们绑定到页面是通过user.uname,user.age这样写感觉很繁琐，我们能不能直接将user中的属性解构出来使用呢? 答案是不能直接对user进行结构,这样会消除它的响应式，这里就和上面我们说props不能使用 ES6 直接解构就呼应上了。那我们就想使用解构后的数据怎么办，解决办法就是使用toRefs,定义转换响应式中所有属性为响应式数据，通常用于解构|展开reactive定义对象， 简化我们在模板中的使用。

格式：

// 响应式数据：{ 属性1, 属性2 }
let { 属性1, 属性2 } = toRefs(响应式数据)

具体使用方式如下：

<template>
  <div class="container">
    <p>{{ num }}</p>
    <p>姓名： {{ uname }}</p>
    <p>年龄： {{ age }}</p>
  </div>
</template>
 
<script>
import { defineComponent, reactive, ref, toRefs } from "vue";
export default com({
  setup() {
    const num = ref(0);
    const user = reactive({ uname: "vivian", age: 18});
    setInterval(() => {
      num.value++;
      user.age++;
    }, 1000);
    return {
      year,
      // 使用reRefs
      ...toRefs(user),
    };
  },
});
</script>

增强版的结构赋值：在解构对象的同时，保留响应式的特点。  

6、vue3.0生命周期钩子函数

•  setup创建实例前

• onBeforeMount挂载DOM前

• onMount挂载DOM后

• BeforeUpdate 更新组件前

• updated 更新组件后

• onBeforeUnmount卸载销毁前

• onUnmount 卸载销毁后

setup () {
    onBeforeMount(()=>{
      console.log('DOM渲染前',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后1',document.querySelector('.container'))
    })
  }

 Vue3.x 还新增用于调试的钩子函数onRenderTriggered和onRenderTricked,  另外，Vue3.x 中的钩子是需要从 vue 中导入的：

import { defineComponent, onBeforeMount, onMounted, onBeforeUpdate,onUpdated,
onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked,onRenderTriggered } from "vue"; 
export default defineComponent({ 
//beforeCreate和created是vue2的 
beforeCreate() {
console.log("--beforeCreate--")
 }, 
created() {
console.log("--created--")
 }, 
setup() { 
console.log("--setup--")
// vue3.x生命周期写在setup中 
onBeforeMount(() => {
console.log("--onBeforeMount--")
})
onMounted(() => {
console.log("--onMounted--"); })
 // 调试哪些数据发生了变化
onRenderTriggered((event) =>{ 
console.log("--onRenderTriggered--",event)
}) 
}, 
});

7、computed函数定义计算属性

格式： 

import { computed } from 'vue'
 
const 计算属性名 = computed(() => {
  return 相关计算结果
})

代码示例：

<template>
  <p>姓名：{{name}}, 公司：{{company}}, 月薪：{{salary}}, 年薪{{total}}</p>
  <button @click="double">月薪double</button>
</template>
<script>
import { ref, computed } from 'vue'
export default {
  name: 'App',
  setup () {
    // 定义响应式对象
    const company = ref('DiDi')
    const name = ref('小王')
    const salary = ref(18000)
    const double = () => {
      salary.value *= 2 // ref数据要加.value
    }
    // 定义计算属性
    const total = computed(() => 12 * salary.value)
    
    return {  
      name, 
      company,
      total,
      salary,
      double
    }
  }
}
</script>

总结：

vue3中的computed函数与vue2中的computed选项功能类似。

computed的入参是一个函数

作用：根据已有数据，产生新的响应式数据。

步骤：导入，定义，导出

computed的高级用法：

格式：

const 计算属性 =  computed({
  get () {
    // 当获取值自动调用
  },
  set (val) {
    // 当设置值自动调用，val会自动传入
  }
})

 示例代码：

<template>
  <div style="padding:2em">
    <p>小花, 月薪:{{salary}}, 年薪:{{total}}</p>
    <p>年薪:<input v-model="total"/></p>
    <button @click="double">月薪double</button>
  </div>
</template>
<script>
// reactive: 是除了ref之外的第二种申明响应式数据的方式
 
import { ref, computed } from 'vue'
export default {
  setup () {
  
    const salary = ref(18000)
     
    const double = () => {
      salary.value *= 2
      console.log(salary)
    }
    // 定义计算属性: 普通的写法：只使用了get
    // const total = computed(() => {
    //   return stu.salary * 12
    // })
 
    // 定义计算属性: 高阶的写法：使用了get + set
    const total = computed({
      get() { return salary.value * 12 },
      set(val) { 
        // 设置计算属性的值，会自动调用，并传入val
        console.log('要设置的值...', val)
        salary.value = val/12
      }
    })
    
    return { double, salary, total}
  }
}
</script>

总结：

计算属性两种用法

• 给computed传入函数，返回值就是计算属性的值

• 给computed传入对象，get获取计算属性的值，set监听计算属性改变

• 在v-model绑定计算属性： <input v-model="total" />

8、watch函数

基于响应式数据的变化执行回调逻辑，和vue2中的watch的应用场景完全一致。

步骤： 

• 导入 import { watch } from 'vue'

• 开启监听。在setup函数中执行watch函数开启对响应式数据的监听

• watch函数接收三个常规参数  watch(source, callback, [options])

  • 第一个参数有三种取值：

    对象，要监听的响应式数据

    数组，每个元素是响应式数据

    函数，返回你要监听变化的响应式数据

  • 第二个参数是：响应式数据变化之后要执行的回调函数

  • 第三个参数是: 一个对象，在里面配置是否开启立刻执行或者深度监听

<template>
    <div>
        {{stu}}, {{salary}}
        <button @click="doSome"> do</button>
    </div>
</template>
<script>
import { reactive, watch, ref } from 'vue'
export default {
    setup() {
        const salary = ref(10000)
        const stu  = reactive({
            address: {city: 'wuhan'}
        })
 
        // 1. 侦听-单个数据
        watch(salary, (newVal, oldVal) => {
            console.log('监听单个数据', newVal, oldVal)
        })
			// 侦听-单个数据
        watch(stu, (newVal, oldVal) => {
            console.log('监听单个数据', newVal, oldVal)
        })
 
      	// 侦听-多个数据
        watch([stu, salary], (newVal, oldVal) => {
            console.log('监听多个数据', newVal, oldVal)
        })
				// 侦听对象的某个属性
        watch(()=>stu.address , (newVal, oldVal) => {
            console.log('第一个参数是函数', newVal, oldVal)
        }, {deep: true,  immediate: true} )
 
        // 测试按钮，修改数据
        const doSome = () => {
            salary.value +=1
            stu.address.city = ''
        }
 
        return {stu, salary, doSome}
    }
}
</script>

总结：

作用：watch用来侦听数据的变化。

格式：watch(数据|数组|get函数，(新值，旧值)=>{回调处理逻辑}, {immediate:true|false, deep: true|false})

以上，我们了解了vue2和vue3使用方法的不同，关于组件通讯和插槽等可以看下一篇。

【相关推荐：《vue.js教程》】

위 내용은 Vue3.0 새로운 기능 및 사용 요약(정리 및 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!