記事ディレクトリ
1. Vue3 の紹介
Vue3コードネーム：ONE PIECE（ワンピース）。
vue2 に対する vue3 の利点:
- パック サイズの縮小、レンダリングの高速化、メモリの削減。
ソースコードのアップグレード:
- リアクティブを実装するには、ObjectDefineProperty の代わりに Proxy を使用します。
- Vue3 は TypeScript をより適切にサポートできます。
2. Vue3 プロジェクト プロジェクトを作成する
2.1 Vue-cli で作成
前提条件: @vue/cli のバージョンが 4.5.0 より前であることを確認してください!
# 查看版本命令
vue -V 或者 vue --version
# 创建一个名为vue3_test的项目
vue create vue3_test
# 注意中间要选择Vue3版本！！！
2.2 Vite を使用して Vue3 プロジェクトを作成する
Vite は、新世代のフロントエンド開発ビルド ツールです。Webpack の機能と同じです。
公式アドレス: https://vitejs.cn/
バイトの利点:
- 開発環境では、パッケージング操作が不要で、コールド スタートを迅速に実行できます。
- 軽量高速熱負荷 (HMR)。
- 真のオンデマンド編集で、アプリケーション全体のコンパイルを待つ必要はありません。
図の前者は、最初にすべてのモジュールを準備してから、サーバー サーバーを構築します。後者は、最初にサーバーを準備してから、リクエストを通じて対応するモジュールを見つけることです。これは前のものとは正反対で、より高速です。
コマンドは次のとおりです。
# 创建工程
npm init vite-app <project-name>
# 进入工程目录
cd <project-name>
# 安装依赖
npm install
# 运行
npm run dev
3. Vue3の解析プロジェクト構成
main.js ファイルの構造は次のとおりです。
//引入的不再是Vue构造函数了，而引用的是createApp就是创建一个应用的工厂函数。
import {
createApp } from 'vue'
import App from './App.vue'
//创建应用实例对象-app(类似于之前vue2中的vm，但app比vm更轻)
const app = createApp(App)
console.log('@@@',App)
//mount就是挂载，与vue3不同的是没有了$符号。
app.mount('#app')
setTimeout(()=>{
//调用unmount可以卸载app应用
app.unmount('#app')
},3000)
// 注意vue3构想的项目，并不支持vue2的写法！！！
// vue2 的写法，通过el或者$mount来指定容器，通过render来渲染。
// const vm = new Vue({
// // el:'#app'
// render:(h)=> h(App)
// })
//
// vm.$mount('#app')
createApp(App) の構造は次のとおりです。
コンポーネント内では、テンプレート構造にルート タグを含めることはできません。
3. Vue3 の開発者ツールをインストールする
Vue の dev-tools インストール パッケージ: https://gitee.com/it-sherlock/develop-common-parameters/tree/master/%E5%89%8D%E7%AB%AF/Vue/dev-tools
4.Vue3のセットアップ
コンポジション API: コンポジション API
setup は Vue3 の新しい構成項目です。
セットアップは、すべての合成 API のパフォーマンス ステージです。
コンポーネントで使用するもの: 数据，方法等等，均要配置在setup中！！！Vue2 では、data 構成アイテムでデータを構成し、methods でメソッドを構成する必要があります。
setup はデータとメソッドを直接返すことができます:
setup は render 関数を返すこともできます:
vue3 プロジェクトでは、vue2 のデータとメソッドを設定できますが、お勧めしません。!
vue3的setup是不能够访问到vue2的data，methods等一些数据和方法的！！
要約:
注: setup を async で修飾することはできません。追加すると、async は戻り値を promise オブジェクトとしてラップするため、setup の戻り値は単純なオブジェクトではありません。
5. Vue3 の ref 関数
5.1 ref 関数は基本的なデータ型を処理します
前提: 最初に vue から ref 関数を導入します。
import {
ref} from 'vue'
vue2 の ref は、ID セレクターと同様に、識別のために属性として使用されます。
vue3 には、定義されたデータをレスポンシブにすることができる追加の ref 関数があります。セットアップで直接定義および返される変数は応答せず、値が変更されてもページは変更されません!
の場合基本数据类型而言、ref 関数は ObjectDefineProperty メソッドを使用して実装され、get メソッドと set メソッドを使用して応答性を実装します。
5.2 ref 関数はオブジェクト型を処理する
オブジェクトのデータ型を扱う ref 関数は、ES6 の Proxy オブジェクトを使用します。
オブジェクトの場合、単に object.value.property 名を使用して応答をトリガーします。
要約:
6. Vue3 のリアクティブ機能
前提：vueにもリアクティブ機能が導入されている
import {
reactive} from 'vue'
リアクティブ関数を使用して基本的なデータ型を処理しないでください。リアクティブはオブジェクト型を処理するように設計されています! !
ref 関数は、オブジェクトを処理する際に下部でリアクティブ関数も使用するため、オブジェクト型も処理できます。
リアクティブの最下層は、ObjectDefineProperty 関数を介して応答しなくなりました。代わりに、プロキシ経由で実装されます。
リアクティブ関数は、配列データの応答性だけでなく、深いレベルのオブジェクト データの応答性もサポートできます。
ちょっとした知識ポイント:
- The data in the array modified by index in vue2 will not trigger responseness. 通常、データ data のレスポンシブ インデックスは、vue2 の $set によってトリガーされます。
- もちろん、vue2 ではインデックス アイテムのプロパティによって応答性をトリガーできます。例: vm.list[3].a = 456。
vue3就弥补了vue2的这个缺点，即便是通过索引赋值也能够触发响应式！
リアクティブ関数は以下を使用します。
- 一般的な形式は次のとおりです。
const 代理对象 = reactive（源对象） 就是将源对象加工成为代理对象(Proxy的实例对象，简称proxy对象)。
リアクティブの内部は、プロキシ オブジェクトを介してソース オブジェクトの内部データを操作する ES6 のプロキシ実装に基づいています。
7. Vue3 と vue2 を比較する
7.1 Vue2 レスポンシブの原則と注意事項
vue2 の配列プッシュは 2 つのことを行います。1 つは配列にデータを追加することで、もう 1 つはページ データを更新することです。
Vue2 は ObjectDefineProperty メソッドで get メソッドと set メソッドを使用するため、get は取得に使用され、set は変更に使用されますが、对于添加和删除却是无可奈何的！！
vue2 オブジェクトはプロパティを追加します:
- person.sex = 'female' を使用して新しい属性を直接追加することはできません。
vue2 はプロパティを削除します: - ネイティブの削除 this.person.name を介して名前を直接削除しても、応答性はトリガーされません!
vue2 配列に対する操作:
要約:
7.2 Vue3 のレスポンシブ原則
7.2.1 プロキシ オブジェクト
vue2は直接追加・削除できない、配列のインデックス項目は直接代入できない、という上記の欠点をvue3はリアクティブで補っています！
繰り返しますが、Object.defineProperty は get アクセスと設定の設定を検出できますが、プロパティの削除と追加を検出できません。だからまだいくつかのバグがあります！
ES6 プロキシ オブジェクト:
- Proxy オブジェクトはウィンドウ上にあり、window.proxy から表示できます。
//源数据
let person = {
name:'张三',
age:18
}
const p = new Proxy(person,{
})
console.log(p)
//Vue3的响应式，通过配置第二个参数handler对象来达到响应式
const p = new Proxy(person,{
//读取p的某个属性时调用
get(target, propName, receiver) {
console.log(`有人读取了p身上的${
propName}属性`)
console.log(target)
console.log(propName)
return target[propName]
},
//修改p的某个属性时调用 和 新增p的某个属性时调用
set(target, propName, value, receiver) {
console.log(`有人修改了p身上的${
propName}属性，我要更新页面了！`)
console.log(target)
console.log(propName)
console.log(value)
target[propName] = value
},
//删除p的某个属性时调用
deleteProperty(target, propName) {
console.log(`有人删除了p身上的${
propName}属性，我要更新页面了！`)
//delete返回的是一个布尔值，同时deleteProperty也要返回一个布尔值！！
let boolean = delete target[propName]
return boolean
}
})
7.2.2 リフレクト オブジェクト
Reflect は、オブジェクトのプロパティを取得、変更、追加、および削除することもできます。
Object.defineProperty と Reflect の比較:
Reflect は比較的堅牢です。!
vue3 の下部にあるオブジェクトの追加、削除、変更、および検査は、対象の操作を直接使用するのではなく、次のように Reflect 関数を介して操作します。
//Vue3的响应式，通过配置第二个参数handler对象来达到响应式
const p = new Proxy(person,{
//读取p的某个属性时调用
get(target, propName, receiver) {
console.log(`有人读取了p身上的${
propName}属性`)
console.log(target)
console.log(propName)
return Reflect.get(target,propName)
},
//修改p的某个属性时调用 和 新增p的某个属性时调用
set(target, propName, value, receiver) {
console.log(`有人修改了p身上的${
propName}属性，我要更新页面了！`)
console.log(target)
console.log(propName)
console.log(value)
Reflect.set(target,propName,value)
},
//删除p的某个属性时调用
deleteProperty(target, propName) {
console.log(`有人删除了p身上的${
propName}属性，我要更新页面了！`)
//delete返回的是一个布尔值，同时deleteProperty也要返回一个布尔值！！
let boolean = Reflect.deleteProperty(target,propName)
return boolean
}
})
要約:
8.リアクティブ関数とref関数の違いは何ですか
9. 注意事項
9.2 Vue2 のいくつかのコンポーネント プロパティを思い出す
$attrs 属性の役割:
$slot の役割:
- 最後に、仮想 DOM が実際の DOM に変換されます。
- 通常は template タグに slot 属性を加えてスロット名を指定することで、配置ラベルを指定することができます。
- スロット名は、slot="xxx" または v-slot:xxx の 2 つの方法で指定します。
9.3 Vue3 セットアップに関する 2 つの注意事項
セットアップの実行時間:
- beforeCreate の前に 1 回実行されますが、これは未定義です。
setup の props パラメータは以下を使用します。
- 注: vue3 親コンポーネントから渡されたプロパティも props 構成アイテムに配置する必要があります!
セットアップの 2 番目のパラメーター コンテキスト:
-
context.attrs の役割:
-
context.emit および emits 構成アイテムの使用:
-
context.slots の使用:
要約:
10. Vue3 で計算された計算されたプロパティ
セットアップ構成アイテムでは、セットアップは beforeCreate の前に自動的に実行されるため、これは絶対に使用されません。これは印刷されても未定義です!
vue2 の形式で計算されたものは vue3 プロジェクトでも使用でき、対応する this は当然 vue オブジェクトです。
vue3 はコンポーズ可能な API に計算されます!
Vue3 は次のように記述されます。
- 計算された API をインポートすることを忘れないでください。
import {
computed} from 'vue'
setup(){
let person = reactive({
firstName: '张',
lastName: '三',
age: 18,
})
//计算属性 简写形式只考虑计算属性读，没有考虑计算属性的改
// person.fullName = computed(()=>{
// return person.firstName + '-' + person.lastName
// })
//计算属性 完整写法(读写)
person.fullName = computed({
get(){
return person.firstName + '-' + person.lastName
},
set(value){
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
return {
person
}
}
要約:
11. Vue3 の watch プロパティ
11.1 Vue2 ウォッチの使用法
Vue2 のウォッチは以下を使用します。
watch:{
//vue2的监听简易写法：直接通过 数据对象名定义函数来监听
// sum(newValue,oldValue){
// console.log('sum的值变化了',newValue,oldValue)
// },
//vue2监听完整写法：
sum:{
immediate:true, // 配置立即监听属性，一进来就先执行一次。
deep:true, // 深度监视属性
handler(newValue,oldValue){
console.log('sum的值变化了',newValue,oldValue)
}
}
11.2 Vue3 ウォッチは ref 関数によって定義されたデータをリッスンします
ウォッチ モニタの ref 関数は次のとおりです。
<template>
<h2>当前求和为：{
{
sum}}</h2>
<button @click="sum++">点我+1</button>
<h2>当前的信息为:{
{
msg}}</h2>
<button @click="msg += '!'">修改信息</button>
</template>
<script>
import {
ref,watch} from 'vue'
export default {
name:'Demo',
setup(){
//数据
let sum = ref(0)
let msg = ref('你好啊')
//情况一：监视ref所定义一个的响应式数据
// watch(sum,(newValue,oldValue)=>{
// console.log('sum变了',newValue,oldValue)
// })
//情况二: 监视ref所定义的多个响应式数据
//第一个参数：监听的数据。第二个参数：监听的函数。第三个参数：配置项
watch([sum,msg],(newValue,oldValue)=>{
//此时的newValue和oldValue就变成了数组
console.log(newValue) //[0, '你好啊!']
console.log(oldValue)//[0, '你好啊']
console.log('sum变了',newValue,oldValue)
},{
immediate:true,deep:true})
return {
sum,
msg
}
}
}
</script>
11.3 Vue3 ウォッチはリアクティブ関数のデータをリッスンします
監視フォーマットは次のとおりです。
- 注 1: ウォッチがリアクティブ関数によって生成されたプロキシ オブジェクトを直接リッスンすると、正常に oldValue を取得できません。!
//就算用ref函数操作，因为是对象，对于对象ref还是走的reactive函数！
let person = reactive({
name:'张三',
age:18
})
//监视reactive所定义的一个响应式数据
watch(person,(newValue,oldVale)=>{
//注意：这里newValue和oldVale一样，也就是无法获得正常的oldValue
//这个问题目前无法解决！
console.log(newValue)//{name: '张三~', age: 19}
console.log(oldVale)//{name: '张三~', age: 19}
console.log('person的age变化了')
})
解決策: ビジネスで oldValue を取得する必要がある場合は、このプロパティをオブジェクトから取り出して、ref 関数で使用することしかできません。
//单独把age拿出来，用ref来声明就可以监听到！！
let age = ref(18)
//就算用ref函数操作，因为是对象，对于对象ref还是走的reactive函数！
let person = reactive({
name:'张三',
})
//监视reactive所定义的一个响应式数据
watch(age,(newValue,oldVale)=>{
//注意：这里newValue和oldVale一样，也就是无法获得正常的oldValue
//这个问题目前无法解决！
console.log(newValue)
console.log(oldVale)
console.log('person的age变化了')
})
-
注 2: Vue3 のウォッチは、強制的にディープ モニタリングを有効にします (ディープ コンフィギュレーションは無効です!)。
-
注 3: リアクティブ関数オブジェクトのプロパティを監視するには、次の手順に従います。
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary: 20
}
}
})
//对象的某个属性，必须要用函数才能监听！！！
watch(()=>person.age,(newValue,oldVale)=>{
console.log(newValue)
console.log(oldVale)
console.log('person的age变化了')
})
- 注 4: 次の形式のリスニング オブジェクトの複数のプロパティ:
//监视reactive所定义的一个响应式数据中的 多个属性！
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary: 20
}
}
})
//那就将其多个函数写成数组的形式
watch([()=>person.age,()=>person.name],(newValue,oldVale)=>{
console.log(newValue)
console.log(oldVale)
console.log('person变化了')
})
- 注 5: 特殊な状況! リアクティブ プロキシ オブジェクトのオブジェクト プロパティをリッスンします。現時点では、詳細な監視に必須ではなくなり、詳細な構成が機能します。! ! モニタリングがリアクティブ プロキシ オブジェクトの場合、この監視は強制的なディープ モニタリングです。! !
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary: 20
}
}
})
//监听一个对象里面的对象属性,因为我们更改的是对象中的对象的对象数据!!
//所以必须开启深度监视deep！！
watch(()=>person.job,(newValue,oldVale)=>{
console.log(newValue)
console.log(oldVale)
console.log('person的job变化了')
},{
deep:true})
要約:
12. Vue3 における watch の .value 問題
注 1: ref で定義された基本的なデータ型をリッスンし、sum.value を追加することはできません!!
- 基本データ型は、.value を付ければ sum.value の値を監視します！変数和ではありません！
//数据
let sum = ref(0)
let msg = ref('你好啊')
let person = ref({
name:'张三',
age:18,
job:{
j1:{
salary: 20
}
}
})
//监听ref定义的基本数据类型，不能添加sum.value!!
//如果添加上了.value那监听的就是sum.value的这个值！并不是sum这个变量！
watch(sum,(newValue,oldValue)=>{
console.log('sum的值变化了',newValue,oldValue)
})
注 2: ref プロキシ オブジェクトの形式では、監視の効果は .value を介して実現されます。
- 彼はプロキシ (リアクティブ関数) オブジェクトを含む refImpl オブジェクト (ref 関数) であるため、オブジェクトを直接監視することはできません。
- より簡単な方法は、 deep: false を直接構成することです。深い監視
let person = ref({
name:'张三',
age:18,
job:{
j1:{
salary: 20
}
}
})
watch(person,(newValue,oldValue)=>{
console.log('person的值变化了',newValue,oldValue)
},{
deep:true}) // 开启深度监视就能监视到了！
13. Vue3 の watchEffect 関数
watchEffectも監視の効果はありますが、ユウウォッチは違います！
- watchEffect は、それを見慣れている人なら誰でもフォローします!
export default {
name:'Demo',
setup(){
//数据
let sum = ref(0)
let msg = ref('你好啊')
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary: 20
}
}
})
//watchEffect是用了谁，就监视谁！
watchEffect(()=>{
const x1 = sum.value
const x2 = person.job.j1.salary
console.log('watchEffect所指定的回调执行了！')
})
return {
sum,
msg,
person
}
}
要約:
- 使用するデータが変更されると、computed と watchEffect の両方が呼び出されて実行されますが、それでも違いがあります。
