目录
- #、基础配置
- 1、安装Node.js
- 2、修改npm镜像源
- 3、配置vscode
- 一、创建项目
- 二、Ref全家桶
- 三、computed计算属性
- js中数组使用的高阶函数
- 四、watch监听器
#、基础配置
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() // 转换为对象,被调用之后将停止监听