#、基础配置

1、安装Node.js

下载地址：https://nodejs.org/zh-cn/download/

安装成功，查看版本node -v和npm -v

2、修改npm镜像源

// 持久修改npm的镜像
npm config set registry https://registry.npm.taobao.org
// 验证是否成功
npm config get registry

3、配置vscode

1、vscode插件：
搜索volar ==> Vue Language Features (Volar)、TypeScript Vue Plugin (volar)

2、vscode 配置快捷模板 设置 ==> 配置用户代码片段 ==> vue.json ==> 自定义设置
3、log里面快速查看对象属性值 ==> F12，设置，启用自定义格式设置工具（配置浏览器）

一、创建项目

npm init vite@latest

创建完成在项目根目录执行以下代码，解决从vue导入模块报错的问题（找不到模块“vue”或其相应的类型声明）

npm i --save-dev @types/node

在typescript对应的编译配置文件tsconfig.json写入以下代码：

"compilerOptions": {
    ...
 
    "types": [
      "node"
    ],
  },

二、Ref全家桶

响应式值使用ref，获取值需要使用.value
isRef 判断对象是不是ref对象
shallowRef 浅层次的响应
ref 深层次的响应

import { ref, Ref } from "vue";

type M = {
  name:string
}

const Man = ref<M>({name:'张三'})

console.log(Man.value.name);  // 张三

// const Man:Ref<M> = ref<M>({ name: '张三' })  // 推荐类型比较复杂时使用

读取dom元素

<div ref="dom">我是dom</div>

const dom = ref<HTMLDivElement>()
console.log(dom.value?.innerText);

ref 支持所有的类型
reactive 支持引用类型Array object Map set
reactive的使用，直接获取属性
reactive不能直接赋值
readonly让对象变成可读对象

import { reactive } from "vue";

type P = {
  name:string,
  age:number
}

const form = reactive<P>({
  name: '张三',
  age: 20
})

console.log(form.age);

三、computed计算属性

import { ref, computed } from "vue";

let A = ref('')
let B = ref('')

写法一：
const name = computed(() => {
  return A.value + B.value
})

写法二：
const name = computed({
  get: (val) => {
    return A.value + B.value
  },
  set: (val) => {
    A.value + B.value
  }
})

js中数组使用的高阶函数

1、filter函数：
作用：对数组进行过滤
传入值：需要传入一个返回布尔值的函数作为过滤标准
返回值：返回一个过滤之后的数组

array2 = array1.filter(function(n){
  return n < 100;
})

2、map函数：
作用：映射操作，具体说就是对数组内的每个值进行计算，再存储到新的数组中
传入值：一个函数
返回值：一个运算后的数组

array3 = array2.map(function(n){
  return n + 100;
})

3、reduce函数：
作用：对数组中的所有内容进行汇总
传入值(2个)：一个函数（函数内部有两个参数，前一个是自动获取的上一次遍历产生的计算结果、后一个是数组的某一个值）、还要传入一个计算结果的初始化值（一般为零）
返回值：可以是数字、字符串（不会再产生一个数组）

total = array3.reduce(function(prevValue, n){
  return prevValue + n;
}, 0)

四、watch监听器

import { ref, watch } from "vue";

let message = ref<string>('张三')
let message2 = ref<string>('李四')

watch([message, message2], (newVal, oldVal) => {
    console.log(newVal, oldVal);
}, {
    deep: true, // 开启深度监听
    immediate: true,  // 立即执行一次
    flush: "pre", // pre组件更新之前调用,sync同步执行post,组件更新之后执行
})

watchEffect的用法

import { watchEffect, ref } from "vue"

let message = ref<string>('AAA')
let message2 = ref<string>('BBB')

watchEffect((oninvalidate) => {
    console.log(message.value);
    console.log(message2.value);
    oninvalidate(()=>{
        console.log("在监听之前做事"); // 函数名称自定义
        
    })
})

停止监听

const stop = watchEffect((oninvalidat) => {
    console.log(message.value);
    console.log(message2.value);
    oninvalidat(() => {
        console.log("在监听之前做事");

    })
})

const stopWatch = () => stop() // 转换为对象，被调用之后将停止监听