How to get started with vue3 quickly, learn these APIs!

How to get started with vue3 quickly? This article will share with you a few APIs. Once you learn these APIs, you can get started directly with vue3. I will slowly learn about the others. I hope it will be helpful to everyone!

Those who have developed projects with vue2 want to get started with vue3 quickly. It is enough to be familiar with a few APIs. Other features will be slowly understood in the process of using vue3. Anyone who studies some API principles after becoming familiar with its use will slowly be able to master vue3.

Moreover, when using vue3 combined with ts, the proportion of ts in the development process is not that big. If you know the basics of ts shared before, it is enough for development. [Related recommendations: vuejs video tutorial]

Global API and application API

A new concept of vue3, return An application instance that provides an application context. The entire component tree mounted by the application instance shares the same context:

const app = createApp(App);
app.use(store).use(router).mount("#app");

vue2:

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

Then those APIs that used to use Vue. now use this one. Application example app.:

##Vue.componentapp.component##app.configapp.directiveapp.mixinapp.useOther APIs like nextTick, h, etc. are used directly from the vue structure:

vue2	vue3
app.config
app.directive
app.mixin
app.use

import { createApp, h, nextTick } from 'vue'

composition API

tips

This is no longer used in vue3

• vue3 components do not require a root tag, but there will be WarningExtraneous non-props attributes
• It is recommended to use single-file components, and the subsequent implementation codes are single-file components

setup

This is so important, vue3 uses this function as the entry point. Receives two parameters props and context. The function will be executed before beforeCreate and created. It can be said that it replaces beforeCreate and created and becomes the new life cycle. The new composition API is written in the setup function.

Props are the props of vue2, and context provides attrs, slots, emit, etc. By returning an object, the responsive data is exposed to the template, which is equivalent to vue2 data. The difference is that the function is also exposed to the template in this way:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1 @click="test">{{ isRef }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup(props) {
    console.log(props.msg);
    let isRef = ref("is ref");
    const test = () => {
      console.log(isRef.value);
    };
    return {
      isRef,
      test,
    };
  },
});
</script>

Single file component

vue3 also provides a single file component (recommended). Add setup to the script, and the code inside will be compiled into a setup function. A few important points:

The top-level binding will be exposed to the top-level binding declared by the template

(including variables, function declarations, and import introductions content) can be used directly in the template Reactive data, components, etc. can also be used directly:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1 @click="test">{{ isRef }}</h1>
  </div>
<MyComponent />
</template>

<script lang="ts" setup>
import MyComponent from &#39;./MyComponent.vue&#39;
import { ref } from "vue";
const msg = "msg";
const isRef = ref("");
function test() {
  console.log(isRef.value);
}
</script>

Using single file components, the use of some attributes must also be changed. Of course, there are other alternative APIs:

Attributesprops and emitsref or $parentslots and attrs

ref

接受一个内部值并返回一个响应式且可变的 ref 对象，在setup函数内部访问ref函数需要加.value， 如果要加类型，要用泛型，不加则会类型推论，也可以不给初始值，则是any，且是undefined：

const ref1 = ref(1);
const ref2 = ref<number>(2);
const ref3 = ref1.value;//不是响应式，相当于变量
const ref4 = ref();//refs.value是undefined
ref2.value = 5;//赋值 读取都要.value

一般来说，ref只会赋值基础数据类型和数组，也可以泛型联合类型 如果将对象分配为ref值，则它将被reactive函数处理为深层的响应式对象：

//不建议，内部也是reactive处理
const ref1 = ref({
  a: 10,
});

//不确定类型
const ref3 = ref<string | number>();
ref3.value = 1;
ref3.value = "";

//数组对象，ts类型声明，用泛型
type Obj1 = { c: string };
type Obj2 = {
  b: string;
  c: Obj1[];
};
const ref2 = ref<Obj2[]>([
  {
    b: "",
    c: [{ c: "" }],
  },
]);

reactive

用来声明响应式的对象，类型通过泛型添加：

type Obj = {
  a: number;
  b: string;
};
let obj = reactive<Obj>({
  a: 10,
  b: "",
});
let state = reactive({
  a: 10,
  b: "",
});

reactive将会解包所有深层的 refs，同时维持ref的响应性， 将ref分配给reactive的property时，ref也会被自动解包。 简单说就是ref的值和reactive的值响应式了

const count = ref(1)
const obj = reactive({ count })

// ref 会被解包
console.log(obj.count === count.value) // true

// 它会更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2

// 它也会更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

//跟上面一样效果
const count = ref(1)
const obj = reactive({})
obj.count = count
console.log(obj.count) // 1
console.log(obj.count === count.value) // true

toRef

为源响应式对象上的某个property新创建一个ref，也就是reactive创建的才可以, 会保持对其源 property 的响应式连接：

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

toRefs

将响应式对象转换为普通对象，其中结果对象的每个property都是指向原始对象相应property的ref：

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:
{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

toRef和toRefs在对一些响应式对象结构展开会很有用，可以有用的时候看看。

watch

watch接收两个参数，第一个参数可以是有return的函数，也可以是一个ref, 第二个参数则跟vue2相同的函数，并且watch可以很多个：

//一般ref不用这种方式
let count = ref(0);
watch(
  () => count.value,
  (val, old) => {
    console.log(old, val);
  }
);

//单个ref推荐
watch(count, (val, old) => {
  console.log(old, val);
});

//监听reactive对象
let state = reactive({ count: 0 });
//函数参数必须具体到某个值，如果是() => state无效，或者加上{ deep: true }
watch(
  () => state.count,
  (val, old) => {
    console.log(old, val);
  }
);

//加上{ deep: true }
watch(
  () => state,
  (val, old) => {
    console.log(old, val);
  },
  { deep: true }
);

//监听整个对象，新旧的值都相同，或者用lodash.cloneDeep进行深拷贝
//state改成() => _.cloneDeep(state)
watch(state, (val, old) => {
  console.log(old.count, val.count);
});

也可以同时监听多个，两个参数分别用数组，个人还是建议单个：

const state = reactive({ count: 1 });
const count = ref(0);
// 监听一个数组
watch(
  [() => state.count, count],
  ([newState, newCount], [oldState, oldCount]) => {
    console.log("new:", newState, newCount);
    console.log("old:", oldState, oldCount);
  }
);

官网一直提到惰性，其实就是是否加immediate: true，加了初始化就会执行。

watchEffect

它"立即执行"传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数：

const state = reactive({ count: 1 });
const count = ref(0);

watchEffect(() => {
  if (state.count > 3) {
    count.value++;
  }
});
watchEffect(() => console.log(count.value));

至于watch和watchEffect共享停止侦听，清除副作用 (相应地 onInvalidate 会作为回调的第三个参数传入)、 副作用刷新时机和侦听器调试行为后面要仔细研究一下。

computed

从vue2开始，就很多人分不清什么时候用computed什么时候用watch，computed主要是用来声明 有两个及以上的依赖的数据，也就是说一个变量是根据多个数据进行判断的，用computed，单个的用watch。 至于语法的不同就不多说了，vue3的computed常用语法是一个带有return的函数，也可以同时存在多个：

let count = ref(0);
let page = ref(0);
let pg = computed(() => {
  return count.value + page.value;
});

要注意，computed声明的变量（pg）是不能直接去修改的（只读），跟vue2一样也有get、set函数（可读可写）。

defineProps、defineEmits

在单文件组件中必须使用defineProps和defineEmits API来声明props和emits，可以算是语法糖。 父组件还是跟原来一样传值，子组件接收：

//父组件
<template>
  <div class="home">
    <input v-model="msg" />
    <HelloWorld :msg="msg" @change="change" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
let msg = ref("is parent");
const change = (val: string) => {
  msg.value = val;
};
</script>

//子组件
<template>
  <div>{{ msg }}</div>
  <button @click="change">emit</button>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
  msg: String,
});
console.log(props.msg);

const emit = defineEmits(["change"]);
const change = () => {
  emit("change", "is son");
};
</script>

//设置默认值
defineProps({
  msg: {
    type: Number,
    default: 100,
  },
});

template可以直接使用msg，要调用的话就得props.msg。

withDefaults

defineProps只能限制类型，没有提供默认值（这边应该是限定用ts的接口才没有默认值）。为了解决这个问题，提供了 withDefaults 编译器宏：

type Porps = {
  msg: string;
};
const props = withDefaults(defineProps<Porps>(), {
  msg: "default",
});

withDefaults接收两个参数，第一个参数是defineProps加props字段的泛型，第二个字段是默认值，也可以不设置。

也可以监听props：

watch(
  () => props.msg,
  (val) => {
    console.log(val);
  }
);

this.$refs

vue2很多情况还是需要用到这个api，vue3中比较特别， 为了获得对模板内元素或组件实例的引用，我们可以像往常一样声明ref， 在渲染上下文中暴露root，并通过ref="root"，将其绑定到 div 作为其 ref。 在虚拟DOM补丁算法中，如果 VNode 的 ref 键对应于渲染上下文中的 ref， 则VNode的相应元素或组件实例将被分配给该ref的值。 这是在虚拟 DOM 挂载/打补丁过程中执行的，因此模板引用只会在初始渲染之后获得赋值。

<button ref="testRef">testRef</button>

let testRef = ref(null);
onMounted(() => {
  // DOM 元素将在初始渲染后分配给 ref
  console.log(testRef.value); // <button>testRef</button>
});

nextTick

跟vue2一样的使用：

nextTick(() => {
  console.log(testRef.value);
});

也可以跟官网提供的一样用async的函数await：

let testRef = ref(null);
const nextTickFn = async () => {
  await nextTick();
  console.log(testRef.value);
};
nextTickFn();

defineExpose

vue2有时候会用this.$refs调用子组件的函数或者变量， 单文件组件是默认关闭的，所以单文件组件要用defineExpose编译器宏暴露出去：

//父组件
<template>
  <div class="home">
    <HelloWorld ref="sonRef" />
  </div>
</template>

<script lang="ts" setup>
import { nextTick, ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
let sonRef = ref();
nextTick(() => {
  sonRef.value.sonFn();
  console.log(sonRef.value.sonRef);
});
</script>

//子组件
let sonRef = ref("is son");
const sonFn = () => {
  console.log("is son fn");
};
defineExpose({ sonFn, sonRef });

vue2的this.$parent在单文件组件中，自己是实现了，但是官方没有直接给出代码：

//父组件
const parentRef = ref("is parent ref");
const parentFn = () => {
  console.log("is parent fn");
};
defineExpose({
  parentRef,
  parentFn,
});

//子组件
let parent = getCurrentInstance();
console.log(parent?.parent?.exposed?.parentRef.value);
parent?.parent?.exposed?.parentFn();

新增组件

teleport

官网介绍了很多，这个组件最大的作用就是可以让组件脱离固定的组件位置，可以挂载在逻辑上最优的位置， 其它使用都跟组件一样，只有位置改变：

<teleport to="#teleportDiv">
  <HelloWorld />
</teleport>

<teleport to="body">
  <HelloWorld />
</teleport>

挂载的元素会从上向下解析，第一个to的元素，标签、class、id等。一般使用也不会随便，都会用id元素或者body。

Suspense

Suspense是一个试验性的新特性，官方也说生产环境请勿使用。 主要是允许将组件异步处理等待过程提升到组件树中处理。

单文件组件里面顶层await里面提到： async setup() 必须与 Suspense 组合使用，Suspense 目前还是处于实验阶段的特性。 我们打算在将来的某个发布版本中开发完成并提供文档。

所以这边就不给出不是单文件组件的代码实现了。

生命周期

生命周期还是跟原来的一样，只是前面都加上了on，destroy都变成了unmount。 setup会在beforeCreate、created之前执行，取代了beforeCreate、created。

• beforeCreate --> beforeCreate
• created --> setup
• beforeMount --> onBeforeMount
• mounted --> onMounted
• beforeUpdate --> onBeforeUpdate
• updated --> onUpdated
• beforeDestroy --> onBeforeUnmount
• destroyed --> onUnmount

使用：

onMounted(() => {
  console.log("mounted");
});

试了一下，居然可以写多个。

vue3新增或者删除了哪些API，其实没必要一下子全部去记住，当一些API使用的时候如果发现不生效了， 再去官网查一下，当然，基础的这些API就得记下来。

还是那句话，先学会基础，上手开发，然后慢慢去了解学习不常用的，甚至是源码。

（学习视频分享：vuejs教程、web前端）

The above is the detailed content of How to get started with vue3 quickly, learn these APIs!. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

1 months ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

3 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7769

15

Java Tutorial

1644

14

CakePHP Tutorial

1399

52

Laravel Tutorial

1294

25

PHP Tutorial

1234

29

Show More

Related knowledge

How to use tinymce in vue3 project May 19, 2023 pm 08:40 PM

tinymce is a fully functional rich text editor plug-in, but introducing tinymce into vue is not as smooth as other Vue rich text plug-ins. tinymce itself is not suitable for Vue, and @tinymce/tinymce-vue needs to be introduced, and It is a foreign rich text plug-in and has not passed the Chinese version. You need to download the translation package from its official website (you may need to bypass the firewall). 1. Install related dependencies npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. Download the Chinese package 3. Introduce the skin and Chinese package. Create a new tinymce folder in the project public folder and download the

vue3+vite: How to solve the error when using require to dynamically import images in src May 21, 2023 pm 03:16 PM

vue3+vite:src uses require to dynamically import images and error reports and solutions. vue3+vite dynamically imports multiple images. If vue3 is using typescript development, require will introduce image errors. requireisnotdefined cannot be used like vue2 such as imgUrl:require(' .../assets/test.png') is imported because typescript does not support require, so import is used. Here is how to solve it: use awaitimport

How to refresh partial content of the page in Vue3 May 26, 2023 pm 05:31 PM

To achieve partial refresh of the page, we only need to implement the re-rendering of the local component (dom). In Vue, the easiest way to achieve this effect is to use the v-if directive. In Vue2, in addition to using the v-if instruction to re-render the local dom, we can also create a new blank component. When we need to refresh the local page, jump to this blank component page, and then jump back in the beforeRouteEnter guard in the blank component. original page. As shown in the figure below, how to click the refresh button in Vue3.X to reload the DOM within the red box and display the corresponding loading status. Since the guard in the component in the scriptsetup syntax in Vue3.X only has o

How Vue3 parses markdown and implements code highlighting May 20, 2023 pm 04:16 PM

Vue implements the blog front-end and needs to implement markdown parsing. If there is code, it needs to implement code highlighting. There are many markdown parsing libraries for Vue, such as markdown-it, vue-markdown-loader, marked, vue-markdown, etc. These libraries are all very similar. Marked is used here, and highlight.js is used as the code highlighting library. The specific implementation steps are as follows: 1. Install dependent libraries. Open the command window under the vue project and enter the following command npminstallmarked-save//marked to convert markdown into htmlnpmins

How to use vue3+ts+axios+pinia to achieve senseless refresh May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia realizes senseless refresh 1. First download aiXos and pinianpmipinia in the project--savenpminstallaxios--save2. Encapsulate axios request-----Download js-cookienpmiJS-cookie-s//Introduce aixosimporttype{AxiosRequestConfig ,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess

How to use Vue3 reusable components May 20, 2023 pm 07:25 PM

Preface Whether it is vue or react, when we encounter multiple repeated codes, we will think about how to reuse these codes instead of filling a file with a bunch of redundant codes. In fact, both vue and react can achieve reuse by extracting components, but if you encounter some small code fragments and you don’t want to extract another file, in comparison, react can be used in the same Declare the corresponding widget in the file, or implement it through renderfunction, such as: constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

How to select an avatar and crop it in Vue3 May 29, 2023 am 10:22 AM

The final effect is to install the VueCropper component yarnaddvue-cropper@next. The above installation value is for Vue3. If it is Vue2 or you want to use other methods to reference, please visit its official npm address: official tutorial. It is also very simple to reference and use it in a component. You only need to introduce the corresponding component and its style file. I do not reference it globally here, but only introduce import{userInfoByRequest}from'../js/api' in my component file. import{VueCropper}from'vue-cropper&

How to solve the problem that after the vue3 project is packaged and published to the server, the access page displays blank May 17, 2023 am 08:19 AM

After the vue3 project is packaged and published to the server, the access page displays blank 1. The publicPath in the vue.config.js file is processed as follows: const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&

See all articles

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved

correspond to
defineProps and defineEmits
defineExpose
useSlots and useAttrs()