1. Page

Official Website: cn.vuejs.org/guide/essen…

<template>
  <div class="index">
      <h2> {{ $t('username') }}</h2>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

2. Ref && Reactive

两种写法

<script setup lang="ts">
  import { ref,reactive } from 'vue'
  
  const count = ref(0) 
  funciton increment(){
      // 在 JavaScript 中需要 
      .value count.value++ 
  }
  
  const state = reactive({ 
      count: 0 
  })
  const increment1 = () => {
      state.count++ 
  }
  
</script>

3. Computed

计算属性

<script setup lang="ts">
  import { ref,reactive } from 'vue'
const obj = reactive({ count: 0 }) watch(obj, (newValue, oldValue) => { // 在嵌套的属性变更时触发 // 注意：`newValue` 此处和 `oldValue` 是相等的 // 因为它们是同一个对象！ }) obj.count++
</script>

4. Watch

监视响应式数据的变化

<script setup lang="ts">
  import { ref,reactive,watch,watchEffect } from 'vue'
  
  const obj = reactive({ count: 0 }) 
  
  watch(obj, (newValue, oldValue) => { 
      console.log('Count change frm ${oldValue} to ${newValue}')
  })
  
  watchEffect ((newValue, oldValue) => { 
      console.log('Count is ${oldValue}')
  })
</script>

5. 生命周期函数

<script setup lang="ts> 
    import { onMounted } from 'vue' 
    
    onMounted(() => { 
        console.log(`the component is now mounted.`) 
    })
</script>

6. Advance

7. toRef && toRefs

<script setup lang="ts> 
    import { ref,reactive,toRef,toRefs } from 'vue' 
    const state = reactive({ 
        foo: '1', 
        bar: '2' 
    }) 
    
    const stateAsRef = toRef(state,'foo')
    const stateAsRefs = toRef(state)
    
    const modify =()=>{
        stateAsRef.value = "good"
    }
    
    const onChange =()=>{
        stateAsRefs.foo.value = "good"
    } 
</script>

8. track && trigger

<script setup lang="ts> 
    import { ref,reactive,toRef,toRefs } from 'vue' 
    const state = reactive({ 
        foo: '1', 
        bar: '2' 
    }) 
    
    const stateAsRef = toRef(state,'foo')
    const stateAsRefs = toRef(state)
    
    const modify =()=>{
        stateAsRef.value = "good"
    }
    
    const onChange =()=>{
        stateAsRefs.foo.value = "good"
    } 
</script>

9. 父子组件传值

/components/demo/person.vue

<template>
    <div class="person" >
        <h1>this is a Person</h1>
        <h2>{{ person.name }}</h2>
        <h2>{{ person.age }}</h2>
        <h2>{{ person.salary }}</h2>
        <button @click="add">Add Salary</button>
        <teacher/>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, isReactive, isRef } from 'vue'
import { provide, inject } from 'vue'
import { toRef } from 'vue';
import teacher from './Teacher.vue'

    const person = reactive({
        name: 'Pserson',
        age: 45,
        tel: 15699999999,
        salary: 6500
    })

    provide("message",toRef(person,'salary'))

    const add =() =>{
        person.salary += 100;
    }
    provide("addSalary",add);

</script>

/components/demo/teacher.vue

<template>
    <div class="teacher" >
        <h1>this is a Teacher</h1>
        <h2>{{ name }}</h2>
        <h2>{{ age }}</h2>
        <student />
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, isReactive, isRef } from 'vue'
import { provide, inject } from 'vue'
import student from './Student.vue'

    let name = 'Teacher';
    let age = ref(25);
    let tel = 15488888888;

</script>

/components/demo/student.vue

<template>
    <div class="student" >
        <h1>this is a Student</h1>
        <h2>{{ name }}</h2>
        <h2>{{ age }}</h2>
        <h2>{{ myValue }}</h2>
        <h2>position is at: {{ x }}, {{ y }}</h2>
        <button @click="add">Add Salary</button>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, isReactive, isRef } from 'vue'
import { provide, inject } from 'vue'

    let name = 'Student';
    let age = ref(15);
    let tel = 15477777777;

    const myValue = inject('message',"假如沒有就用自己的");

    const add = inject("addSalary",()=>{});
</script>

10. Symbol

在大型项目中，建议最好使用 Symbol 来作为注入名以避免潜在的冲突

/src/keys/index.ts

import type {InjectionKey, Ref } from "vue"

// 限制了 provide 导出的数据必须是 ref 且 boolean 类型
export const showPopupKey: InjectionKey<Ref<boolean>> = Symbol()
// 限制了 provide 导出的数据必须是 string
export const titleKey: InjectionKey<string> = Symbol()

父子组件传值

// 在供给方组件中
import { provide } from 'vue'
import { titleKey } from './keys/index'

provide(titleKey, { /*
  要提供的数据
*/ });

// 注入方组件
import { inject } from 'vue'
import { titleKey } from './keys/index'

const injected = inject(titleKey)

11.interface

定义一个类的类型

<script setup lang="ts>
import { reactive ,ref } from 'vue'
    
    //定义数据类型
    interface User {
        date: string
        name: string
        address: string
        }

    const formatter = (row: User) => {
        return row.address
    }
    
</script>

12. Mouse

Create mouse.ts

import { ref, onMounted, onUnmounted } from 'vue'

// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)

  // 组合式函数可以随时更改其状态。
  const update = (event:any) => {
    x.value = event.pageX
    y.value = event.pageY
  }

  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  // 通过返回值暴露所管理的状态
  return { x, y }
}

vue 页面使用

<template>
    <div>
        <h2>position is at: {{ x }}, {{ y }}</h2>
    </div>

  </template>

<script setup lang="ts">
  import { useMouse } from '@/components/MyComponent/mouse'

  const { x, y } = useMouse();
</script>

<style scoped>

</style>