ts + setup

This article is the practice of vue3. X syntax. It will not introduce a specific API syntax separately, please refer to vUE official website for detailed syntax. The usage of Script Setup + TS is used in this article. It is my favorite syntax and I feel it is the ultimate practice of VUe3 on TS.

The top attributes

Any bindings at the top of script Setup declarations (including variables, function declarations, and import imports) can be used directly in templates; But just for use, because it is not reactive data, there is no two-way binding, so it will not be updated synchronously on the page.

<template> <div> <h1>{{ hello }}</h1> <p> {{ count }} <button @click="handleClick">add</button> </p> </div> </template> < script lang = "ts" setup > / / if only single type, vue will automatically push to, need not add type let hello: string | undefined = "hello, vue"; // Vue is automatically derived based on the following values. let count = 0; function handleClick(): void { console.log(count); count++; } </script>Copy the code

Responsive data

  • ref: to giveBasic data typesBind responsive data that needs to be accessed.valueIn the form of,tamplateDon’t need.value, will be parsed.
  • reactive: to giveComplex data typesBind responsive data and access it directly.
< the template > < div > < h1 > {{title}} < / h1 > < p > the current rating: {{count}} < button @ click = "handleAdd" > update < / button > < / p > < p > pets: {{ userInfo.pet }}</p> </div> </template> <script lang="ts" setup> import { ref, reactive } from "vue"; // Const title = ref<string>(" responsive data "); // Let count = ref(0); // Let count = ref(0); / / user information - reactive to the binding complex data types interface IUserInfo {name: string, pet: string | undefined, level: Number} const userInfo = reactive<IUserInfo>({name: "zs", level: 0, pet: undefined,}) void { count.value++; Userinfo.level = count.value; userinfo.level = count.value; userInfo.pet = count.value >= 5 ? 'horse' : undefined; // Unlock pets at level 5} </script>Copy the code

usewatchOptimize the above example

  1. fromvueIn the structurewatch;
  2. watchIs a function that can write more than one example at a time or listen for more than one example at a time;
< the template > < div > < h1 > {{title}} < / h1 > < p > the current rating: {{count}} < button @ click = "handleAdd" > update < / button > < / p > < p > pets: {{ userInfo.pet }}</p> </div> </template> <script lang="ts" setup> import { ref, reactive, watch } from "vue"; // Const title = ref<string>(" responsive data "); // Let count = ref(0); // Let count = ref(0); / / user information - reactive to the binding complex data types interface IUserInfo {name: string, pet: string | undefined, level: number } const userInfo = reactive<IUserInfo>({ name: "zs", level: 0, pet: Watch (count, (nl, OD) => {if (nl >= 5) {userinfo.level = count. userInfo.pet = count.value >= 5 ? 'horse' : undefined; Function handleAdd(): void {count.value++; function handleAdd(): void {count.value++; } </script>Copy the code

usecomputed

< the template > < div > < h1 > {{title}} < / h1 > < p > the current rating: {{count}} < button @ click = "handleAdd" > update < / button > < / p > < p > pets: {{ userInfo.pet }}</p> <p>{{ showAddictionPrevention }}</p> </div> </template> <script lang="ts" setup> import { ref, reactive, watch, computed } from "vue"; // Const title = ref<string>(" responsive data "); // Let count = ref(0); // Let count = ref(0); / / user information - reactive to the binding complex data types interface IUserInfo {name: string, pet: string | undefined, level: number } const userInfo = reactive<IUserInfo>({ name: "zs", level: 0, pet: Const showAddictionPrevention = computed(() => {if (count.value === 0) return "Welcome"; If (count. Value >= 5) return "Login time is too long "; return ''; }) // watch: listen for a property; watch(count, (nl, od) => { if (nl >= 5) { userInfo.level = count.value; userInfo.pet = count.value >= 5 ? 'horse' : undefined; Function handleAdd(): void {count.value++; function handleAdd(): void {count.value++; } </script>Copy the code

Service life cycle

Once the lifecycle method is removed from the VUE structure, it is a function that can be executed when passed to the callback.

<template> <div> <h1>{{ title }}</h1> </div> </template> <script lang="ts" setup> import { ref, onMounted } from "vue"; // To set the basic data type, use const title = ref<string>("Props And Emits"); OnMounted (() => {console.log(" Loading completed...") ); }); </script>Copy the code

props and emit

This is written based on TS, so it is passed in as a generic. If it is not TS, it can be implemented in vUE syntax.

<!-- Father.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <Child :count="count" @change="handleChange"/>
  </div>
</template>

<script lang="ts" setup>
import { ref, } from "vue";
// 子组件不需要注册，可以直接使用
import Child from "./Child.vue";

// 设置基本数据类型时，使用 ref
const title = ref<string>("Props And Emits");
const count = ref<number>(1);

function handleChange(val: number):void {
  count.value = val;
}
</script>

<!-- Child.vue -->
<template>
  <div>
    <h2>Child</h2>
    <p>{{ props.count }}</p>
    <button @click="handleAdd">add</button>
  </div>
</template>


<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";

// 使用 
interface IProps {
  count: number
}
const props = defineProps<IProps>();

const emit = defineEmits<{
  (event: 'change', total: number): void
}>()


function handleAdd(): void {
  emit("change", props.count + 1);
}
</script>
Copy the code