ビュー (4)-ビュー 3

ネット 2023-08-11 18:50:41 訪問数: null

コースリンク

目次

1. Vue3 のクイックスタート

1.1. Vue3 の概要

1.2. Vue3 がもたらすもの

1.2.1. パフォーマンスの向上

  • バンドルサイズが 41% 削減

  • 初期レンダリングが 55% 高速化、更新レンダリングが 133% 高速化

  • メモリが 54% 削減

    …

1.2.2. ソースコードのアップグレード

  • 応答性を実現するには、defineProperty の代わりに Proxy を使用します

  • 仮想 DOM と Tree-Shaking の実装を書き直す

    …

1.2.3. TypeScript の採用

  • Vue3 は TypeScript をより適切にサポートできるようになります

1.2.4. 新機能

  1. 合成API（合成API）

    • セットアップ構成
    • リファレンスとリアクティブ
    • 時計と時計効果
    • 提供して注入する
    • …

  2. 新しいビルトイン

    • 断片
    • テレポート
    • サスペンス

  3. その他の変更点

    • 新しいライフサイクルフック
    • データオプションは常に関数として宣言する必要があります
    • v-on 修飾子としての keyCode サポートを削除
    • …

2.Vue3.0プロジェクトを作成する

2.1. vue-cli を使用して作成する

公式ドキュメント: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

2.2. vite を使用して作成する

公式ドキュメント: https://v3.cn.vuejs.org/guide/installation.html#vite

Vite公式サイト：https://vitejs.cn

  • ヴァイトとは何ですか？— 新世代のフロントエンド ビルド ツール。
  • 利点は次のとおりです。
    • 開発環境ではパッケージング操作が不要で、すぐにコールドスタートできます。
    • 軽量で高速なホットリロード (HMR)。
    • 真のオンデマンド コンパイル。アプリケーション全体がコンパイルされるのを待つ必要はありません。
  • 従来工法とバイト工法の比較表

ここに画像の説明を挿入

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

3. 共通構成 API

公式ドキュメント: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

3.1. 開始されたセットアップ

  1. 理解: Vue3.0 の新しい設定項目、値は関数です。
  2. セットアップはすべてComposition API（コンポジションAPI）の「パフォーマンスステージ」です。
  3. コンポーネントで使用されるデータ、メソッドなどはセットアップで設定する必要があります。
  4. setup 関数の 2 つの戻り値:
    1. オブジェクトが返された場合、オブジェクト内のプロパティとメソッドをテンプレートで直接使用できます。（集中！）
    2. レンダリング関数を返す場合: レンダリング コンテンツをカスタマイズできます。（学ぶ）
setup(){
    
    //此处只是测试一下setup，暂时不考虑响应式
    //直接定义变量
    let name = 'Tom'
    let age = 18
    function sayHi(){
    
    
      alert(`我叫${
      
      name}，我今年${
      
      age}岁啦`)
    }
    // 返回一个对象（常用）
    return {
    
    //对象形式，触发简写
      name,
      age,
      sayHi,
    }
    // 返回一个函数（渲染函数）
    // return () => { return h('h1','这里传要渲染的内容')}
    // return () => h('h1','这里传要渲染的内容')//简写

  },
  1. 注意点：
    1. Vue2.x 構成と混合しないようにしてください
      • セットアップのプロパティとメソッドには、Vue2.x 構成 (データ、メソッド、計算...) でアクセスできます。
      • ただし、 Vue2.x 構成 (データ、メソッド、計算...) にはsetup でアクセスできません。
      • 名前が重複している場合は、セットアップが優先されます。
    2. 戻り値は戻りオブジェクトではなく Promise になり、テンプレートは戻りオブジェクトのプロパティを参照できないため、setup を非同期関数にすることはできません。(後で Promise インスタンスを返すこともできますが、それには Suspense コンポーネントと非同期コンポーネントの連携が必要です)

3.2.ref関数

  • 役割: レスポンシブなデータを定義する
  • 文法：const xxx = ref(initValue)
    • 応答データを含む参照オブジェクト (参照オブジェクト、略して ref オブジェクト)を作成します。
    • JS でのデータ操作:xxx.value
    • テンプレート内のデータを読み取ります: .value は必要ありません。直接:<div>{ {xxx}}</div>
  • 述べる：
    • 受信データは、基本タイプまたはオブジェクトタイプです。
    • データの基本的なタイプ: Reactive は依然として信頼性が高くObject.defineProperty()、get完全ですset。
    • オブジェクト型データ: Vue3.0 の新しい関数 (関数) を内部的に「レスキュー」しますreactive。
<template>
  <!-- Vue3中的template可以没有根标签 -->
  <div>
    <h1>我是App组件</h1>
    <h3>姓名：{
   
   {name}}</h3>  <!--模板里面不用.value-->
    <h3>年龄：{
   
   { age }}</h3>  
    <h3>工种：{
   
   { job.type }}</h3> 
    <h3>年薪：{
   
   { job.salary }}</h3> 
    <button @click="changeInfo">修改人的信息</button><br />
  </div>
  
</template>

<script>
import {
      
       ref } from 'vue'
export default {
      
      
  name: 'App',
  
  setup(){
      
      
    //直接定义变量
    let name = ref('Tom')
    //引用实现的实例对象---引用(实现)对象---RefImpl---refernce implement
    let age = ref(18)
    let job = ref({
      
      
      type:'前端工程师',
      salary:'30w'
    })
    function changeInfo(){
      
      
      //要操作修改值的时候，就用变量名.value
      //基本数据类型更改值（xx.value）
      name.value = '李四'
      age.value = 20
      //复杂数据类型更改值（xx.value.xxx）
      job.value.type = '后端'
      job.value.salary = '28W'
    }

  
    // 返回一个对象（常用）
    return {
      
      //对象形式，触发简写
      name,
      age,
      job,
      changeInfo,
      
    }
   
  },
}
</script>

3.3. リアクティブ機能

  • 機能:応答データのオブジェクト型を定義します(基本型には使用せず、ref関数を使用します)
  • 構文:const 代理对象= reactive(源对象)オブジェクト (または配列) を受け取り、プロキシ オブジェクト (プロキシのインスタンス オブジェクト。プロキシ オブジェクトと呼ばれます) を返します。
  • reactive で定義される reactive データは「深い」です。
  • ES6 ベースの内部プロキシ実装は、プロキシ オブジェクトを通じてソース オブジェクトの内部データを操作します。
<template>
  <!-- Vue3中的template可以没有根标签 -->
  <div>
    <h1>我是App组件</h1>
    <h3>姓名：{
   
   {person.name}}</h3>  
    <h3>年龄：{
   
   { person.age }}</h3>  
    <!-- <h3>工种：{
    
    { job.type }}</h3> 
    <h3>年薪：{
    
    { job.salary }}</h3>  -->
    <h3>工种：{
   
   { person.job.type }}</h3> 
    <h3>年薪：{
   
   { person.job.salary }}</h3> 
    <h3>爱好：{
   
   { person.hobby }}</h3>  
    <h3>测试c：{
   
   { person.job.a.b.c }}</h3>  
    <button @click="changeInfo">修改人的信息</button><br />
  </div>
  
</template>

<script>
import {
      
       ref,reactive } from 'vue'
export default {
      
      
  name: 'App',
  
  setup(){
      
      
    let person = reactive({
      
      
      name:'Tom',
      age: 18,
      job:{
      
      
        type:'前端工程师',
        salary:'30w',
        a:{
      
      
          b:{
      
      
            c:666
          }
        }
      },
      hobby:['抽烟','喝酒','烫头']

    })   
    function changeInfo(){
      
      
      person.name = '李四'
      person.age = 20
      person.job.type = '后端'
      person.job.salary = '28W'
      person.hobby[0] = '学习'//和vue2中区别的一个地方，vue2中这样改页面不会响应
      person.job.a.b.c = 999
    }

    // 返回一个对象（常用）
    return {
      
      //对象形式，触发简写
      person,
      changeInfo,    
    }   
  },
}
</script>

3.4. Vue3.0 の応答原理

3.4.1. vue2.x の応答性

  • 実装原則:

    • オブジェクト タイプ:Object.defineProperty()属性の読み取りと変更によるインターセプト (データ ハイジャック)。

    • 配列タイプ: インターセプトは、配列を更新するための一連のメソッドをオーバーライドすることによって実現されます。(配列の変更メソッドはラップされています)。

      Object.defineProperty(data, 'count', {
        
        
    get () {
        
        }, 
    set () {
        
        }
})

  • 問題があります：

    • 属性を追加または削除しても、インターフェイスは更新されません。
    • 添字を使用して配列を直接変更すると、インターフェイスは自動的に更新されません。

  • 解決

//=================新增==================
/*...
this.$set(要添加属性的对象,'变量名',值)
或者
Vue.set(this.要添加属性的对象,'变量名',值)
*/
this.$set(this.person, 'sex', '女')
Vue.set(this.person, 'sex', '女')

//===================删除====================
/*...
this.$delete(要删除属性的对象,'变量名')
或者
Vue.delete(this.要删除属性的对象,'变量名')*/
this.$delete(this.person, 'name')
Vue.delete(this.person, 'name')


//================通过下标修改数组=============
/*this.$set(要修改的对象的属性,下标,值)
或者
Vue.set(要修改的对象的属性,下标,值)
或者
vue2里面响应式操作数组的函数---数组身上的变更方法
*/
this.$set(this.person.hobby, 0, '学习')
Vue.set(this.person.hobby, 0, '学习')
this.person.hobby.splice(0, 1, '学习')

3.4.2. Vue3.0の応答性

  • 実現原理：
    • プロキシ経由 (プロキシ): 属性値の読み取りと書き込み、属性の追加、属性の削除など、オブジェクト内の属性の変更をインターセプトします。
    • Through Reflect (反射): ソース オブジェクトのプロパティを操作します。
    • プロキシとリフレクトについては、MDN ドキュメントで説明されています。

      • プロキシ：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

      • Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

        new Proxy(data, {
          
          
	// 拦截读取属性值
    get (target, prop) {
          
          
    	return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
          
          
    	return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
          
          
    	return Reflect.deleteProperty(target, prop)
    }
})

proxy.name = 'tom'

3.5. リアクティブとリファレンス

  • データを定義するという観点から見ると、次のようになります。
    • ref は、基本型データを定義するために使用されます。
    • reactive は、オブジェクト (または配列) タイプのデータを定義するために使用されます。
    • 備考: ref はオブジェクト (または配列) 型のデータを定義するために使用することもでき、これは内部でプロキシ オブジェクトreactiveに自動的に変換されます。
  • 原理比較の観点から:
    • ref は、ANDObject.defineProperty()を介して応答性 (データ ハイジャック) を実装します。getset
    • reactive は、 Proxyを使用して応答性 (データ ハイジャック) を実装し、 Reflectを通じてソース オブジェクト内のデータを操作します。
  • 使用の観点から:
    • ref: で定義されたデータは、データ操作には必要.valueですが、データ読み取り時のテンプレートでの直接読み取りには必要ありません.value。
    • reactive で定義されるデータ: 操作データと読み取りデータ:どちらも必要ありません.value。

3.6. セットアップ時の2つの注意点

  • セットアップ実行のタイミング

    • beforeCreate の前に 1 回実行されますが、これは未定義です。

  • セットアップのパラメータ

    • props: 値は、コンポーネントの外部から渡され、コンポーネントの内部宣言によって受け取られるプロパティを含むオブジェクトです。
    • コンテキスト:コンテキストオブジェクト
      • attrs: 値は、コンポーネントの外部から渡されるが、props 構成で宣言されていない属性を含むオブジェクトです。 と同等ですthis.$attrs。
      • スロット: 受信したスロットの内容。 に相当しますthis.$slots。
      • Emit: カスタム イベントを送出する関数。 と同等ですthis.$emit。
vue2中之前没有讲到的东西
attrs--->其实当在父组件中自定义的一个变量时【props交互使用那种】，几遍在子组件中没有些props来接受，也仍能在$attrs中找到那些变量

slots--->同理，即便在子组件中没有用<slot></slot>来接受插槽，但仍能在$slots中看见父组件中声明传过来的插槽

親コンポーネント

<template>
  <Demo msg="halowa" school="atguigu" @hello="showHelloMsg">
    <template v-slot:aNameSlot>
      <div>
        <span>猜猜我是谁？</span>
      </div>
    </template>
 </Demo> 
</template>

<script>
import Demo from './components/Demo.vue'
export default {
      
      
  name: 'App',
  components:{
      
      Demo},
  setup(){
      
      
    function showHelloMsg(value){
      
      
      alert(`你好啊，你触发了hello点击事件，我收到的参数是${ 
        value}`)
    }
    return {
      
      showHelloMsg}
  }
}
</script>


<template>
  <div>
    <h3 v-show="person.name">姓名：{
   
   {person.name}}</h3>
    <h3>年龄：{
   
   { person.age }}</h3>
    <button @click="test">测试一下Demo组件中触发Hello组件的hello事件</button>
    <br/>
    <slot name="aNameSlot"></slot>
  </div>
</template>
<script>
import {
      
       ref, reactive } from "vue";
export default {
      
      
  name: "Demo",
  //控制台可能会报没有这俩的提示，所以建议加下，不过后续可能会改好
  props: ["msg", "school"],
  emits: ["hello"],
  //   beforeCreate() {
      
      
  //     console.log("----beforeCreate----",this);
  //   },
  setup(props, context) {
      
      
    // console.log("----setup----",this); undefined 它比beforeCreate先执行
    console.log("----setup----props", props);
    console.log("----setup----context", context);
    //context.atrrs  相等于vue2中的$attrs   
    //context.slots  相等于vue2中的$attrs   
    //context.emit  触发自定义事件    
    let person = reactive({
      
      
      name: "Tom",
      age: 18,
    });
    function test() {
      
      
      context.emit("hello", 666); //事件名，值
    }
    return {
      
      
      person,
      test,
    };
  },
};
</script>

3.7. 計算されたプロパティとモニタリング

3.7.1. 計算関数

  • Vue2.x の計算された構成関数と一致します。

  • 言葉遣い

    import {
      
      computed} from 'vue'

setup(){
      
      
    ...
    //计算属性——简写
    //没有考虑计算属性被修改的情况
    //用的reactive响应式的，可以直接追加
    /* person.fullName = computed(()=>{
        ...
    }) */
    let fullName = computed(()=>{
      
      
        return person.firstName + '-' + person.lastName
    })
    //计算属性——完整
    //考虑到了读和写的情况
    let fullName = computed({
      
      
        get(){
      
      
            return person.firstName + '-' + person.lastName
        },
        set(value){
      
      
            const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
}

3.7.2. 監視機能

  • Vue2.x の監視設定機能と一致します。

  • 2 つの小さな「穴」:

    • reactive:oldValueで定義されたレスポンシブデータを監視する場合、oldValueが正しく取得できず、強制的にディープ監視が有効になります(ディープ設定は無効)。
    • reactive: で定義されたリアクティブ データ内の属性を監視する場合、詳細設定が有効です。
    //情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
      
      
	console.log('sum变化了',newValue,oldValue)
},{
      
      immediate:true})

//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
      
      
	console.log('sum或msg变化了',newValue,oldValue)
}) 

/* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
      
      
	console.log('person变化了',newValue,oldValue)
},{
      
      immediate:true,deep:false}) //此处的deep配置不再奏效

//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{
      
      
	console.log('person的job变化了',newValue,oldValue)
},{
      
      immediate:true,deep:true}) 

//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
      
      
	console.log('person的job变化了',newValue,oldValue)
},{
      
      immediate:true,deep:true})

//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
      
      
    console.log('person的job变化了',newValue,oldValue)
},{
      
      deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

監視するときの値の問題: ref で定義されたデータを監視するか、reactive で定義されたデータを監視するかを明確に考える必要があります。

  • まず、ref に遭遇したとき、テンプレート構文では value は使用されず、js でデータを操作するには value が必要であるという原則が頭の中にあります。
  • watch では結論から言いますと、一般的なデータを検出したい場合には value は必要ありません。検出オブジェクトタイプのデータに付加価値が必要な場合
setup(props, context) {
    
      
    let sum = ref(0)//基本类型
    let msg = ref('你好啊')
    let person = ref({
    
    //引用类型
      name:'Tom',
      age:14,
      job:{
    
    
        j1:{
    
    salary:20}
      }
    })
    watch(sum, (newValue,oldValue)=>{
    
    //ref
      console.log('sum变化了',newValue,oldValue)
    })
    // msg.value ...

    //对于对象类型的监视---方法1---person.value
    /* watch(person.value, (newValue,oldValue)=>{
      console.log('person变化了',newValue,oldValue)
    }) */

    //对于对象类型的监视---方法2---person + deep:true
    watch(person, (newValue,oldValue)=>{
    
    
      console.log('person变化了',newValue,oldValue)
    },{
    
    deep:true})
    ...
}

3.7.3. watchEffect関数

  • 監視のルーチンは、監視の属性だけでなく、監視のコールバックも指定します。

  • watchEffect のルーチンは、どの属性を監視するか、どの属性を監視コールバックで使用するか、そしてどの属性を監視するかを指定する必要はありません。

  • watchEffect は計算に少し似ています。

    • ただし、computed は計算値（コールバック関数の戻り値）に注目するため、戻り値を記述する必要があります。
    • また、watchEffect は処理 (コールバック関数の関数本体) に注目するため、戻り値を記述する必要がありません。
    //watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
      
      
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

3.8. ライフサイクル

vue2.x のライフサイクル
ここに画像の説明を挿入

vue3.0のライフサイクルここに画像の説明を挿入

  • Vue2.x のライフサイクル フックは Vue3.0 でも引き続き使用できますが、そのうち 2 つのフックの名前が変更されました。
    • beforeDestroyに名前を変更しますbeforeUnmount
    • destroyedに名前を変更しますunmounted
  • Vue3.0 では、Composition API の形式でライフサイクル フックも提供されており、Vue2.x のフックとの対応関係は次のとおりです。
    • beforeCreate===>setup()
    • created=======>setup()
    • beforeMount===>onBeforeMount
    • mounted=======>onMounted
    • beforeUpdate===>onBeforeUpdate
    • updated=======>onUpdated
    • beforeUnmount==>onBeforeUnmount
    • unmounted=====>onUnmounted

3.9. カスタムフック機能

  • フックとは何ですか? —— 基本的には、セットアップ関数で使用されるComposition APIをカプセル化する関数です。

  • vue2.x の mixin に似ています。

  • カスタム フックの利点: コードの再利用により、セットアップのロジックがより明確になり、理解しやすくなります。
    ここに画像の説明を挿入

ここに画像の説明を挿入

3.10.toRef

  • 機能: 値が別のオブジェクトの属性を指す ref オブジェクトを作成します。

  • 文法：const name = toRef(person,'name')

  • 用途: 外部使用のみを目的としてレスポンシブ オブジェクトにプロパティを提供したい場合。

  • 拡張機能:関数toRefsと同じですが、複数の ref オブジェクトをバッチで作成できます。構文:toReftoRefs(person)

<template>
  <div>
    <h2>{
   
   { person }}</h2>
    <hr />
    <h2>姓名：{
   
   {name}}</h2>
    <h2>年龄：{
   
   {age}}</h2>
    <h2>薪资：{
   
   {salary}}k</h2>
    <button @click="name='Leo'">修改name</button>
    <button @click="age++">修改age</button>
    <button @click="salary++">涨薪</button>
  </div>
</template>
  
  <script>
import {
      
       reactive, toRef,toRefs  } from "vue";
export default {
      
      
  name: "Demo",
  setup(props, context) {
      
        
    let person = reactive({
      
      
      name:'Tom',
      age:14,
      job:{
      
      
        j1:{
      
      salary:20}
      }
    })
    //          字符串       ObjectRefTmpl(桥接到person.name本体)
    console.log(person.name, toRef(person,'name'))
    console.log('----------------------')
    console.log(toRefs(person))

    return {
      
      
      person,//toRef是引用一个，ref是复制一个【仅针对本场景】
      
      // name:toRef(person,'name'),//如果用ref(person.name)--复制-->会导致数据分家（这里改了但person里不会改）
      // age:toRef(person,'age'),
      
      ...toRefs(person),//--------------这样就可以简写了--------------
      salary:toRef(person.job.j1,'salary')
    };
  },
};
</script>

4. その他の合成 API

4.1.shallowReactive とshallowRef

  • shallowReactive: オブジェクトの最も外側のプロパティのみを処理するレスポンシブ (浅いレスポンシブ) 。

  • shallowRef:オブジェクトの応答性ではなく、基本データ型の応答性のみを処理します。

  • いつ使用しますか?

    • オブジェクトデータがある場合、構造は比較的深いですが、変更すると外側の属性のみが変更されます ===> shallowReactive。
    • オブジェクト データがある場合、後続の関数はオブジェクト内のプロパティを変更しませんが、===>を置き換えるshallowRef新しいオブジェクトを生成します。

4.2.readonly とshallowReadonly

  • readonly: リアクティブ データを読み取り専用 (ディープ読み取り専用) にします。
  • shallowReadonly: リアクティブ データを読み取り専用 (浅い読み取り専用) にします。
  • 適用シナリオ: データの変更が予想されない場合。

4.3.toRaw と markRaw

  • toRaw：
    • 機能:reactiveボットによって生成された応答オブジェクトを通常のオブジェクトに変換します。
    • 使用シナリオ: 応答オブジェクトに対応する共通オブジェクトを読み取るために使用されます。この共通オブジェクトに対するすべての操作によってページが更新されることはありません。
  • マーク生：
    • 役割: オブジェクトが再び応答オブジェクトにならないように、オブジェクトにマークを付けます。
    • アプリケーションシナリオ:
      1. 複雑なサードパーティ ライブラリなど、一部の値はレスポンシブに設定すべきではありません。
      2. リアクティブ変換をスキップすると、不変のデータ ソースを含む大きなリストをレンダリングする際のパフォーマンスが向上します。
...
<script>
import {
      
       ref, reactive,toRefs,toRaw, markRaw  } from "vue";
export default {
      
      
  name: "Demo",
  setup(props, context) {
      
        
    let person = reactive({
      
      
      name:'Tom',
      age:14,
      job:{
      
      
        j1:{
      
      salary:20}
      }
    })
    let sum = ref(0)

    function addCar(){
      
      
      let car = {
      
      
        name:'奔驰',
        price:40
      }
      person.car = markRaw(car)//不会成为响应式的
    }
    function showRawPerson(){
      
      
      const p = toRaw(person)//只能处理reactive生成的数据
      console.log(p)//Object
    }
    return {
      
      
      sum,
      person,
      ...toRefs(person),
      showRawPerson,
      addCar
    };
  },
};
</script>

4.4.カスタム参照

  • 役割:依存関係の追跡と更新トリガーを明示的に制御するカスタム refを作成します。

  • 手ぶれ補正効果を得るには:

    <template>
	<input type="text" v-model="keyword">
	<h3>{
     
     {keyword}}</h3>
</template>

<script>
	import {ref,customRef} from 'vue'
	export default {
		name:'Demo',
		setup(){
			// let keyword = ref('hello') //使用Vue准备好的内置ref
			//自定义一个myRef
			function myRef(value,delay){
				let timer
				//通过customRef去实现自定义
				return customRef((track,trigger)=>{
					return{
						get(){
							track() //告诉Vue这个value值是需要被“追踪”的
							return value
						},
						set(newValue){
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //告诉Vue去更新界面
							},delay)
						}
					}
				})
			}
			let keyword = myRef('hello',500) //使用程序员自定义的ref
			return {
				keyword
			}
		}
	}
</script>

4.5.提供と注入

  • 役割:祖先コンポーネントと子孫コンポーネント間の通信を実現します。

  • ルーチン: 親コンポーネントにはprovideデータを提供するオプションがあり、子孫コンポーネントにはinjectこのデータの使用を開始するオプションがあります。

  • 具体的には次のように書かれています。

    1. 親コンポーネント内:

      setup(){
        
        
	......
    let car = reactive({
        
        name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}

    2. 子孫コンポーネント内:

      setup(props,context){
        
        
	......
    const car = inject('car')
    return {
        
        car}
	......
}

4.6. 応答データの判定

  • isRef: 値が ref オブジェクトかどうかを確認します。
  • isReactive: オブジェクトがreactiveリアクティブ プロキシによって作成されたかどうかを確認します
  • isReadonly: オブジェクトがreadonly読み取り専用プロキシによって作成されたかどうかを確認します。
  • isProxy: オブジェクトがreactiveorメソッドによってreadonly作成されたプロキシかどうかを確認します。

5. 構成 API の利点

5.1. オプション API の問題

従来の OptionsAPI では、要件を追加または変更する場合、データ、メソッド、および計算のそれぞれで変更する必要があります。

5.2. 構成 API の利点

コードと関数をよりエレガントに整理できます。関連する関数のコードをより整然とした方法でまとめて整理します。

6. 新しいコンポーネント

6.1.フラグメント

  • Vue2 の場合: コンポーネントにはルート タグが必要です
  • Vue3 では: コンポーネントはルート タグを持つことができず、複数のタグが内部的にフラグメント仮想要素に含まれます。
  • 利点: ラベル レベルの削減、メモリ使用量の削減

6.2.テレポート

  • テレポートとは何ですか? --は、コンポーネントの HTML 構造を指定された場所にTeleport移動できる手法です。

    <teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

6.3.サスペンス

  • 非同期コンポーネントの待機中に追加のコンテンツをレンダリングすることで、アプリケーションのユーザー エクスペリエンスが向上します。

  • 使用手順:

    • コンポーネントを非同期的にインポートする

      import {
        
        defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

    • Suspenseパッケージコンポーネントを使用してdefault設定します。fallback

      <template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<h3>加载中.....</h3>
			</template>
		</Suspense>
	</div>
</template>

7. その他

7.1. グローバルAPIの移管

  • Vue 2.x には、多くのグローバル API と構成があります。

    • 例: グローバル コンポーネントの登録、グローバル ディレクティブの登録など。

      //注册全局组件
Vue.component('MyButton', {
        
        
  data: () => ({
        
        
    count: 0
  }),
  template: '<button @click="count++">Clicked {
        
        { count }} times.</button>'
})

//注册全局指令
Vue.directive('focus', {
        
        
  inserted: el => el.focus()
}

  • これらの API は Vue3.0 で調整されました。

    • グローバル API を調整します。つまり、Vue.xxxアプリケーション インスタンスに合わせて調整します ( app)

      2.x グローバル API ( Vue) 3.x インスタンス API ( app)
      Vue.config.xxxx app.config.xxxx
      Vue.config.productionTip 取り除く
      Vue.component アプリコンポーネント
      ディレクティブ.view app.ディレクティブ
      Vue.mixin アプリミックスイン
      Vue.use アプリの使用
      Vue.プロトタイプ app.config.globalProperties

7.2. その他の変更点

  • data オプションは常に関数として宣言する必要があります。

  • 過度のクラス名の変更:

    • Vue2.xの書き方

      .v-enter,
.v-leave-to {
        
        
  opacity: 0;
}
.v-leave,
.v-enter-to {
        
        
  opacity: 1;
}

    • Vue3.xの書き方

      .v-enter-from,
.v-leave-to {
        
        
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
        
        
  opacity: 1;
}

  • keyCode を v-on 修飾子として削除し、サポートされなくなりましたconfig.keyCodes

  • v-on.native修飾子を削除する

    • 親コンポーネントのバインドイベント

      <my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>

    • サブコンポーネントでカスタム イベントを宣言する

      <script>
  export default {
    emits: ['close']
  }
</script>

  • フィルターを削除する

    フィルタ これは便利そうに見えますが、中括弧内の式が「単なる JavaScript」であるという前提を打ち破るカスタム構文が必要であり、学習コストだけでなく実装コストもかかります。フィルターをメソッド呼び出しまたは計算されたプロパティに置き換えることをお勧めします。

  • …

おすすめ

転載: blog.csdn.net/m0_43416592/article/details/129886528
おすすめ
Microsoft、オープンソース フォント Cascadia Code のメジャー アップデートをリリース
ランキング
iOS访问https无数据，访问http正常
【转载】QNET：腾讯WeTest的APP弱网络测试专家
Win10システムの後、キーボードの故障を復元
コンピュータ構成の原則：メモリ
コンピュータ ネットワーク - DNS ドメイン名解決プロセス
mongoの基本操作 --- ドキュメントの追加、削除、変更、クエリ
ドッキングウィンドウ・コンで接続TomcatとMySQLの
カランボラPython上級講義13ループ（1）トラバーサル
캐릭터 인터랙션 보너스 표시의 Unity 구현
設置環境はUbuntuのシステムの下での競合に依存遭遇しました
アーカイブ
もっと
2024-05-27(1)
2024-05-26(0)
2024-05-25(1)
2024-05-24(11)
2024-05-23(35)
2024-05-22(9)
2024-05-21(36)
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)

コードワールド

© 2018 codetd.com