摘要

深入解析vue3.0的API，包括composition API的setup和props/context参数，生命周期、watch和watchEffect的使用，computed的set/get方法，以及ref和reactive的区别。还有全局变量globalPr…，一起来探索vue3.0的魅力吧！

正文

vue3.0API详细说明

详尽解读了vue3.0常见的composition API 包含，setup涵数及props与context主要参数，和使用方法，解读了vue3.0生命期，watch与wacteFFect涵数的使用方法与差别，computed涵数及set与get用法，界定主要参数二种方法ref与reactive详细说明，按时全局变量globalProperties，启用部件use，写保护特性readonly，ref,torefs,isref,unref

Vue 3.0 于 2020-09-18 公布了，应用了 Typescript 开展了规模性的重新构建，产生了 Composition API RFC 版本号，相近 React Hook 一样的写 Vue，能够自定自身的 hook ，让使用人更为的灵便。

为何发布3.0？

对 TypeScript 适用不友善（全部特性都放到了 this 目标上，无法推翻部件的基本数据类型）
很多的 API 初始化在 Vue 目标的原形上，难以达到 TreeShaking
- TreeShaking：当我们引进一个控制模块的情况下，我不会引进这一控制模块的全部编码，我只引进我需要的编码
构架方面对混合开发 dom 3D渲染开发设计适用不友善
CompositionAPI。受 ReactHook 启迪
更便捷的适用了 jsx
Vue 3 的 Template 适用好几个根标识，Vue 2 不兼容
对虚似 DOM 开展了调用、对模版的编译程序开展了提升实际操作

一、setup

为大家应用 vue3 的 Composition API 新特点给予了统一的通道, 有一些文章内容说setup 涵数会在 beforeCreate 以后、created 以前实行但实践经验证明这一叫法有误如下图打印出次序, vue3 也是取消了这两个勾子，统一用 setup 替代, 该涵数等同于一个性命周期函数，vue 中以往的 data，methods，watch 等所有都用相匹配的增加 api 写在 setup()涵数中。

1、setup主要参数

props: 部件传到的特性
context：attrs，emit，slots

props

　　setup中接纳的props是响应式网站的，当传到新的props 时，会立即被升级。因为是响应式网站的，因此不能应用ES6结构，结构会清除它的响应式网站。必须构造可以用toRefs()

context

　　setup中不可以浏览Vue2中最常见的this目标，因此context中就给予了this中最常见的三个特性：attrs、slot 和emit，各自相匹配Vue2.x中的 $attr特性、slot扩展槽和$emit发送事情。

简易使用方法

2、reactive、ref与toRefs

在vue2.x中，定义数组全是在data中，可是Vue3.x 能够应用reactive和ref来开展数据信息界定。

差别

　　reactive用以解决目标的双重关联，ref则解决js基础类型的双重关联，reactive不可以代理商基本上种类，比如字符串数组、数据、boolean等。

简易使用方法

<template>
  <div>
    <span>{{ year }}</span
    ><span>{{ user.name }}</span
    ><span>{{ user.label }}</span>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  props: {
    data: {
      type: Object,
      default: {
        id: 1,
        name: "配对",
      },
    }, },
  components: {},

  setup(props, con) {
    const year = ref(10);
    const user = reactive({
      name: "夏利车",
      label: "",
    });
　　//这儿ref赋值必须加value
    if (year.value > 5) {
      user.label = "厉害";
    } else {
      user.label = "一般";
    }
    return {
      year,
      user,
    };
  },
};
</script>

　　不可以立即对user开展构造，那样会清除它的响应式网站，这儿就和上边大家说props不可以应用ES6立即结构就映衬到了。那大家就想应用结构后的数据信息该怎么办，解决方案便是应用toRefs。

   return {
        year,
        // 应用reRefs
        ...toRefs(user)
    }

3、生命期

　　我们可以见到beforeCreate和created被setup更换了（可是Vue3中你依然能够应用，由于Vue3是兼容问题的，也便是你具体应用的是vue2的）。次之，勾子取名都提升了on; Vue3.x还增加用以调节的钩子函数onRenderTriggered和onRenderTricked

<script>
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);
    });
  },
});
</script>

4、全局性界定特性 globalProperties

　　在新项目中通常会全局性界定公共性特性或方式，便捷大家部件间启用。

import { createApp } from 'vue'
import App from './App.vue'
import utils from './utils'

// vue2.0书写
let vue=new Vue()
vue.prototype.utils=utils
// vue3.0书写
const app=createApp(App)
app.config.globalProperties.utils=utils

app.mount('#app')

vue3.0中应用全局性界定的特性

<script>

import { getCurrentInstance } from "vue";

export default {
  components: {},
  setup(props, con) {
const { ctx } = getCurrentInstance();
    console.log(ctx.utils);

  },
};
</script>

5、use与plugin

界定一个部件

根据use引进

6、readonly 写保护特性

在应用readonly后再次开展拷贝是不允许改动的，这一api不常见

7、computed测算api

这儿引进了proxy内的相近书写，拥有set与get的內容书写，该涵数用于造就计算属性，和以往一样，它回到的值是一个 ref 目标。里边能够传方式，或是一个目标，目标中包括 set()、get()方式。

7.1 建立写保护的计算属性

<template>
  <div>
    <p>refCount: {{refCount}}</p>
    <p>计算属性的值computedCount : {{computedCount}}</p>
    <button @click="refCount  ">refCount   1</button>
  </div>
</template>

<script>
import { computed, ref } from '@vue/composition-api'
export default {
  setup() {
    const refCount = ref(1)
    // 写保护
    let computedCount = computed(() => refCount.value   1) //2
    console.log(computedCount)
    return {
      refCount,
      computedCount
    }
  }
};
</script>

7.2 根据 set()、get()方式建立一个可写应写的计算属性

<template>
  <div>
    <p>refCount: {{refCount}}</p>
    <p>计算属性的值computedCount : {{computedCount}}</p>
    <button @click="refCount  ">refCount   1</button>
  </div>
</template>

<script>
import { computed, ref } from '@vue/composition-api'
export default {
  setup() {
    const refCount = ref(1)
    // 可写应写
    let computedCount = computed({
      // 赋值涵数
      get: () => refCount.value   1,
      // 取值涵数
      set: val => {
        refCount.value = refCount.value -5
      }
    })
　　//开启get涵数
    console.log(computedCount.value)
// 为计算属性取值的实际操作，会开启 set 涵数
    computedCount.value = 10
    console.log(computedCount.value)
    // 开启 set 涵数后，count 的值会被升级
    console.log(refCount.value)
return {
      refCount,
      computedCount
    }
  }
};
</script>

8、watch与watchEffect

8.2watch

　　watch 涵数用于监听特殊的数据库，并在调用函数中实行不良反应。默认设置状况是可塑性的，换句话说仅在监听的源数据信息变动时才实行回调函数。

　　 * 1、必须一个确立的数据资料
* 2、必须有一个调用函数
* 3、直到更改才会实行涵数

<script>
import { ref, watch } from "vue";
export default {
  components: {},
  setup(props, con) {
    const count = ref(0);
    const name = ref("iuuggu");
    setTimeout(() => {
      (count.value = 1), (name.value = "这一行山");
    }, 200);
    watch(
      () => {
        /*
         *   1、必须一个确立的数据资料
         *   2、必须有一个调用函数
         *   3、直到更改才会实行涵数
         *
         */
        return count.value;
      },
      () => {}
    );
    // 4、ref缩写 ，reactive不能
    watch(count, () => {});
    // 5、监视好几个
    watch(
      () => {
        return [count, name];
      },
      ([newv, oldv], [newv, oldv]) => {}
    );
    // 6、onTrack,onTrigger
    watch(
      () => {
        return [count, name];
      },
      ([newv, oldv], [newv, oldv]) => {},
      {
        onTrack(e) {},
        onTrigger(e) {},
      }
    );
  },
};
</script>

8.1.1 监视数据库

reactive

setup(props, context) {
    const state = reactive<Person>({ name: 'vue', age: 10 })

    watch(
      () => state.age,
      (age, preAge) => {
        console.log(age); // 100
        console.log(preAge); // 10
      }
    )
    // 改动age 的时候会开启watch 的回调函数, 打印出变动前后左右的值
    state.age = 100
    return {
      ...toRefs(state)
    }
  }

ref

setup(props, context) {
    const age = ref<number>(10);

    watch(age, () => console.log(age.value)); // 100

    // 改动age 的时候会开启watch 的回调函数, 打印出变动后的值
    age.value = 100
    return {
      age
    }
  }

8.1.2监视好几个

setup(props, context) {
    const state = reactive<Person>({ name: 'vue', age: 10 })

    watch(
      [
　　　　　　() => state.age, 
　　　　　　() => state.name
　　　　],
      ([newName, newAge], [oldName, oldAge]) => {
        console.log(newName);
        console.log(newAge);

        console.log(oldName);
        console.log(oldAge);
      }
    )
    // 改动age 的时候会开启watch 的回调函数, 打印出变动前后左右的值, 这时必须留意, 变更在其中一个值, 都是会实行watch的回调函数
    state.age = 100
    state.name = 'vue3'
    return {
      ...toRefs(state)
    }
  }

8.1.三秒top 终止监视

在 setup() 涵数内建立的 watch 监控，会在当今部件被消毁的情况下全自动终止。假如要想确立地终止某一监控，能够启用 watch() 涵数的传参就可以，英语的语法以下：

setup(props, context) {
    const state = reactive<Person>({ name: 'vue', age: 10 })

    const stop =  watch(
      [() => state.age, () => state.name],
      ([newName, newAge], [oldName, oldAge]) => {
        console.log(newName);
        console.log(newAge);

        console.log(oldName);
        console.log(oldAge);
      }
    )
    // 改动age 的时候会开启watch 的回调函数, 打印出变动前后左右的值, 这时必须留意, 变更在其中一个值, 都是会实行watch的回调函数
    state.age = 100
    state.name = 'vue3'

    setTimeout(()=> {
      stop()
      // 这时改动时, 不容易开启watch 回调函数
      state.age = 1000
      state.name = 'vue3-'
    }, 1000) // 一秒以后讲撤销watch的监视

    return {
      ...toRefs(state)
    }
  }

8.2 watchEffect

　该涵数有些像update涵数，但他实行在update与beforeuodate以前。

　　　　　  *    1、初次载入会立即执行
         *    2、回应的最后全部依靠监视转变（数据信息更改）
         *    3、在卸载掉onUnmounte时全自动终止
         *    4、实行stop便会终止监视，不然一直监视
         *    5、多线程涵数先实行再去监视更改

<script>
import { watchEffect, ref, onMounted } from "vue";
export default {
  components: {},
  //con==context(attrs,emit,slots)
  setup(props, con) {
    const count = ref(0);
    setTimeout(() => {
      count.value = 1;
    }, 2000);
    const stop = watchEffect(
      () => {
        /*
         *    1、初次载入会立即执行
         *    2、回应的最后全部依靠监视转变（数据信息更改）
         *    3、在卸载掉onUnmounte时全自动终止
         *    4、实行stop便会终止监视，不然一直监视
         *    5、多线程涵数先实行再去监视更改
         */
      },
      {
        // 6、在update以后实行
        flush: "post",
        // 同歩实行
        flush: "async",
      }
    );
    setTimeout(() => {
      stop();
    }, 4000);

    // 7、部件挂在ref
    const myRef = ref(null);
    // 防止监视时先见听见null 在监视到h1
    onMounted(() => {
      watchEffect(() => {
        console.log(myRef.value);
      });
    });
    // 8、debugging  开发方式应用
    watchEffect(
      () => {
        console.log(count.value);
      },
      {
        onTrack(e) {
          // 监视到count和更改count
        },
        onTrigger(e) {
          // count更改了会开启
        },
      }
    );
    return {
      myRef,
      count,
    };
  },
};
</script>

9、ref,torefs,isref,unref

9.1ref

ref() 涵数用于依据给出的值建立一个响应式网站的数据信息目标，ref() 调用函数的传参是一个目标，这一目标上只包括一个 .value 特性：

ref数据信息

<template>
    <div class="mine">
        {{count}} // 10
    </div>
</template>

<script >
import {ref } from 'vue';
export default {
  setup() {
    const count = ref(10)
    // 在js 中获得ref 中界定的值, 必须根据value特性
    console.log(count.value);
    return {
       count
    }
   }
}
</script>

ref 浏览dom

根据 refs 来回来真正 dom 原素, 这一和 react 的使用方法一样,为了更好地得到对模版内原素或部件案例的引入，我们可以像以往一样在 setup()中申明一个 ref 并回到它

 或是跟以往一样，在 html 中载入 ref 的名字

```
 在steup 中界定一个 ref
```
```
 steup 中回到 ref的案例
```

 onMounted 中能够获得 ref的RefImpl的目标, 根据.value 获得真正dom

<template>
  <!--第一步：或是跟以往一样，在 html 中载入 ref 的名字-->
  <div class="mine" ref="elmRefs">
    <span>1111</span>
  </div>
</template>

<script >
import { set } from 'lodash';
import { onMounted, ref } from 'vue';
export default{
  setup(props, context) {
    // 获得真正dom
    const elmRefs = ref(null);
    onMounted (() => {
      console.log(elmRefs.value); // 获得一个 RefImpl 的目标, 根据 .value 浏览到数据信息
    })

    return {
      elmRefs
    }
  }
}
</script>

在 reactive 目标中浏览 ref 建立的响应式网站数据信息

当把 ref() 建立出去的响应式网站数据信息目标，初始化到 reactive() 处时，会全自动把响应式网站数据信息目标进行为初始的值，不需根据 .value 就可以立即被浏览，比如：

<template>
    <div class="mine">
        {{count}} -{{t}} // 10 -100
    </div>
</template>

<script >
import  reactive, ref, toRefs } from 'vue';
export default {
  setup() {
    const count = ref(10)
    const obj = reactive({
      t: 100,
      count
    })
    // 根据reactive 来获得ref 的值时,不用应用.value特性
    console.log(obj.count);
    return {
       ...toRefs(obj)
    }
   }
}
</script>

9.2 toRefs() 涵数

toRefs() 涵数能够将 reactive() 建立出去的响应式网站目标，变换为一般的目标，只不过是，这一目标上的每一个特性连接点，全是 ref() 种类的响应式网站数据信息

<template>
  <div>
    <p>{{ count }} - {{ name }}</p>
    <button @click="count  = 1"> 1</button>
    <button @click="add"> 1</button>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/composition-api";
export default {
  setup() {
    // 响应式网站数据信息
    const state = reactive({ count: 0, name: "zs" });
    // 方式 
    const add = () => {
      state.count  = 1;
    };
    return {
      // 非响应式网站数据信息
      // ...state,
      // 响应式网站数据信息
      ...toRefs(state),
      add
    };
  }
};
</script>

9.3 isref

isRef() 用于分辨某一值是不是为 ref() 建立出去的目标

 setup(props, context) {
    const name: string = 'vue'
    const age = ref(18)
    console.log(isRef(age)); // true
    console.log(isRef(name)); // false

    return {
      age,
      name
    }
  }

9.4 unref

unRef() 用于分辨某一值是不是为 ref() 建立出去的目标有抛出去该目标

 setup(props, context) {
    const name: string = 'vue'
    const age = ref(18)
    console.log(unRef(age)); // 18
    console.log(unRef(name)); // vue

    return {
      age,
      name
    }
  }

关注不迷路

扫码下方二维码，关注宇凡盒子公众号，免费获取最新技术内幕！

温馨提示：如果您访问和下载本站资源，表示您已同意只将下载文件用于研究、学习而非其他用途。

文章版权声明 1、本网站名称：宇凡盒子
2、本站文章未经许可，禁止转载！
3、如果文章内容介绍中无特别注明，本网站压缩包解压需要密码统一是：yufanbox.com
4、本站仅供资源信息交流学习，不保证资源的可用及完整性，不提供安装使用及技术服务。点此了解
5、如果您发现本站分享的资源侵犯了您的权益，请及时通知我们，我们会在接到通知后及时处理！提交入口

深入解析Vue API

摘要

正文

vue3.0API详细说明

为何发布3.0？

1、setup主要参数

2、reactive、ref与toRefs

3、生命期

4、全局性界定特性 globalProperties

5、use与plugin

6、readonly 写保护特性

7、computed测算api

7.1 建立写保护的计算属性

7.2 根据 set()、get()方式建立一个可写应写的计算属性

8、watch与watchEffect

8.2watch

8.1.1 监视数据库

8.1.2监视好几个

8.1.三秒top 终止监视

8.2 watchEffect

9、ref,torefs,isref,unref

9.1ref

ref数据信息

ref 浏览dom

在 reactive 目标中浏览 ref 建立的响应式网站数据信息

9.2 toRefs() 涵数

9.3 isref

9.4 unref

关注不迷路

评论0

在线客服

升级VIP

夜间模式

返回顶部

站点公告

深入解析Vue API

摘要

正文

vue3.0API详细说明

为何发布3.0？

1、setup主要参数

2、reactive、ref与toRefs

3、生命期

4、全局性界定特性 globalProperties

5、use与plugin

6、readonly 写保护特性

7、computed测算api

7.1 建立写保护的计算属性

7.2 根据 set()、get()方式 建立一个可写应写的计算属性

8、watch与watchEffect

8.2watch

8.1.1 监视数据库

8.1.2监视好几个

8.1.三秒top 终止监视

8.2 watchEffect

9、ref,torefs,isref,unref

9.1ref

ref数据信息

ref 浏览dom

在 reactive 目标中浏览 ref 建立的响应式网站数据信息

9.2 toRefs() 涵数

9.3 isref

9.4 unref

关注不迷路

大家在看

评论0

在线客服

升级VIP

夜间模式

返回顶部

站点公告

社交账号快速登录

社交账号快速登录

7.2 根据 set()、get()方式建立一个可写应写的计算属性