Vue3+TypeScript基础
Vue3+Ts 入门
一、组合式API
1、计算属性API
-
单向响应
<template> 姓：<input v-model="username.surname"> <br> 名：<input v-model="username.name"> <br> 单向响应：<input v-model="username.nick"> <br> </template> <script setup lang="ts"> import { computed } from '@vue/reactivity'; import { reactive } from 'vue'; const username = reactive({ surname: "张", name: "三" }) username.nick = computed(()=>{ return username.surname + '*' + username.name }) </script> -
双向响应
<template> 姓：<input v-model="username.surname"> <br> 名：<input v-model="username.name"> <br> 双向响应：<input v-model="username.nick"> <br> </template> <script setup lang="ts"> import { computed } from '@vue/reactivity'; import { reactive } from 'vue'; const username = reactive({ surname: "张", name: "三" }) username.nick = computed({ get(){ return username.surname + '*' + username.name }, set(value){ const arr = value.split('*') username.surname = arr[0] username.name = arr[1] } }) </script>
2、监听属性API
-
监听整个对象
# 监听整个对象,由于是浅拷贝，他们新旧指向的是同一个对象 <template> <h2>年龄：{{ userInfo.age }}</h2> <button @click="userInfo.age++"> 年龄+1</button> </template> <script setup lang="ts"> import { reactive, watch } from 'vue'; const userInfo = reactive({ name: '张三', age: 20 }) watch(userInfo, (newVal, oldVal) => { console.log('新：'); console.log(newVal); console.log('************************'); console.log('旧：'); console.log(oldVal); }) </script> -
监听对象中单个属性
# 监听对象中单个属性可以检测到新旧值的变化 <template> <h2>年龄：{{ userInfo.age }}</h2> <button @click="userInfo.age++"> 年龄+1</button> </template> <script setup lang="ts"> import { reactive, watch } from 'vue'; const userInfo = reactive({ name: '张三', age: 20 }) watch(()=>userInfo.age, (newVal, oldVal) => { console.log('新：'); console.log(newVal); console.log('************************'); console.log('旧：'); console.log(oldVal); }) </script> -
监听多个对象
# 监听对象中多个属性 <template> <h2>姓名：{{ userInfo.name }}</h2> <button @click="userInfo.name+='是个傻逼'">改名</button> <br> <h2>年龄：{{ userInfo.age }}</h2> <button @click="userInfo.age++"> 年龄+1 </button> </template> <script setup lang="ts"> import { reactive, watch } from 'vue'; const userInfo = reactive({ name: '张三', age: 20 }) watch([()=>userInfo.name,()=>userInfo.age], (newVal, oldVal) => { console.log('新：'); console.log(newVal); console.log('************************'); console.log('旧：'); console.log(oldVal); }) </script> -
监听对象中的对象（深度监听）
<template> <h2>年龄：{{ userInfo.hobby.like }}</h2> <button @click="userInfo.hobby.like += '很快乐'">点我</button> <br> </template> <script setup lang="ts"> import { reactive, watch } from 'vue'; const userInfo = reactive({ name: '张三', age: 20, hobby: { like: '打球' } }) watch(() => userInfo.hobby.like, (newVal, oldVal) => { console.log('新：'); console.log(newVal); console.log('************************'); console.log('旧：'); console.log(oldVal); }, { deep: true }) </script>
3、高级监听API （watchEffect）
-
基本使用(默认先执行一次)
# watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调 <template> <h2>姓名：{{ userInfo.name }}</h2> <button @click="userInfo.name += '111'">修改</button> <br> </template> <script setup lang="ts"> import { reactive, watch, watchEffect } from 'vue'; const userInfo = reactive({ name: '张三' }) watchEffect(()=>{ userInfo.name console.log('姓名变了'); }) </script> -
监听预前处理oninvalidate参数
# oninvalidate 监听值修改前的回调 <template> <h2>姓名：{{ userInfo.name }}</h2> <button @click="userInfo.name += '111'">修改</button> <br> </template> <script setup lang="ts"> import { reactive, watchEffect } from 'vue'; const userInfo = reactive({ name: '张三' }) watchEffect((oninvalidate)=>{ oninvalidate(()=>{ console.log("before"); }) userInfo.name console.log('姓名变了'); }) </script> -
停止监听
# 停止后不再监听值的变化 <template> <h2>姓名：{{ userInfo.name }}</h2> <button @click="userInfo.name += '111'">修改</button> <button @click="stop">停止监听</button> <br> </template> <script setup lang="ts"> import { reactive, watchEffect } from 'vue'; const userInfo = reactive({ name: '张三' }) const stop = watchEffect((oninvalidate)=>{ oninvalidate(()=>{ console.log("before"); }) userInfo.name console.log('姓名变了'); }) </script>
4、响应式对象解构API
-
toRef()
<template> <h2>姓名：{{ AA }}</h2> <button @click="userInfo.name += '加1'">修改</button> </template> <script setup lang="ts"> import { reactive, toRef } from 'vue'; const userInfo = reactive({ name: '张三' }) const AA = toRef(userInfo,'name') </script> -
toRefs()
<template> <h2>姓名：{{ name }}</h2> <button @click="name += '加1'">修改姓名</button> <br> <h2>年龄：{{ age }}</h2> <button @click="age++">修改年龄</button> </template> <script setup lang="ts"> import { reactive, toRef, toRefs } from 'vue'; const userInfo = reactive({ name: '张三', age: 20 }) const {name,age} = toRefs(userInfo) </script>
5、生命周期API
<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated } from 'vue';
console.log('setup执行');
onBeforeMount(() => {
console.log('*** 挂载前 ***');
})
onMounted(() => {
console.log('*** 挂载后 ***');
})
onBeforeUpdate(() => {
console.log('*** 更新前 ***');
})
onUpdated(() => {
console.log('*** 更新后 ***');
})
onBeforeUnmount(() => {
console.log('*** 卸载前 ***');
})
onUnmounted(() => {
console.log('*** 卸载后 ***');
})
</script>
6、ref 获取 dom
<template>
<div ref="box">我是box</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
let box = ref(null) // 本质是reactive({value:null})
// dom挂载后的生命周期
onMounted(()=>{
console.log(box.value);
})
// 这里会输出null,setup是最先执行，此时dom还没生成
console.log(box.value);
</script>
7、Hooks
-
官方hooks
-
useAttrs()
// 父组件 <template> <SonVue tit="父组件传值1" title="父组件传值2"/> </template> // 子组价 <script setup lang="ts"> import { useAttrs } from 'vue'; let attr = useAttrs() console.log(attr); </script>
-
-
自定义hooks
-
鼠标跟踪器示例
# convertImg.ts import { ref, onMounted, onUnmounted } from 'vue' // 按照惯例，组合式函数名以“use”开头 export function useMouse() { // 被组合式函数封装和管理的状态 const x = ref(0) const y = ref(0) // 组合式函数可以随时更改其状态。 function update(event) { x.value = event.pageX y.value = event.pageY } // 一个组合式函数也可以挂靠在所属组件的生命周期上 // 来启动和卸载副作用 onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update)) // 通过返回值暴露所管理的状态 return { x, y } }# 在组件中的使用 <template> <div>横轴：{{ x }}</div> <div>纵轴：{{ y }}</div> </template> <script setup lang="ts"> import { useMouse } from '../../hooks/convertImg' const { x, y } = useMouse() </script> -
第三方hooks
-
安装依赖
npm install @vueuse/core -
简单使用
<template> <div ref="el" :style="style" style="position: fixed;background-color: pink;"> 请拖动我 {{ x }}, {{ y }} </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { useDraggable } from '@vueuse/core' const el = ref<HTMLElement | null>(null) const { x, y, style } = useDraggable(el, { initialValue: { x: 40, y: 40 } }) </script>
-
-
8、插槽
8.1、匿名插槽
-
A组件
<template> <B> 这是XXX数据 这是YYY数据 </B> </template> <script setup lang="ts"> import B from '@/views/A/B.vue' </script> -
B组件：
<template> <div> <header> <div>头部</div> <slot></slot> </header> <footer> <div>底部</div> <slot></slot> </footer> </div> </template>
8.2、具名插槽
-
A组件
<template> <B> <!-- 标准写法 --> <template v-slot:xxx>这是xxx数据</template> <template v-slot:yyy>这是yyy数据</template> <!-- 简写 --> <template #xxx>这是yyy数据</template> <template #yyy>这是yyy数据</template> </B> </template> <script setup lang="ts"> import B from '@/views/A/B.vue' </script> -
B组件
<template> <div> <h1> 子:A组件 </h1> <header> <div>头部</div> <slot name="xxx"></slot> </header> <footer> <div>底部</div> <slot name="yyy"></slot> </footer> </div> </template>
8.3、作用域插槽
-
A组件
<template> <B> <!-- 标准写法 --> <template v-slot="{ data }">{{ data.name }}==>{{ data.age }}</template> <!-- 简写 --> <template #default="{ data }">{{ data.name }}==>{{ data.age }}</template> </B> </template> <script setup lang="ts"> import B from '@/views/A/B.vue' </script> -
B组件
<template> <div> <section> <div v-for="item in list" :key="item.id"> <slot :data="item"></slot> </div> </section> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const list = ref([ {id:1,name:'张三',age:15}, {id:2,name:'李四',age:18}, {id:3,name:'王二麻子',age:20}, {id:4,name:'刘五',age:28}, {id:5,name:'小六子',age:22}, ]) </script>
8.4、动态插槽 -【通过数据进行切换】
-
A组件
<template> <B> <template #[yyy]>这是yyy数据</template> </B> </template> <script setup lang="ts"> import B from '@/views/A/B.vue' import { ref } from 'vue'; let yyy = ref('yyy') </script> -
B组件
<header> <div>头部</div> <slot name="xxx"></slot> <div>底部</div> <slot name="yyy"></slot> </header>
9、Teleport（传送）
<Teleport to=".main">这是传送1</Teleport>
<Teleport to="#home">这是传送2</Teleport>
<Teleport to="body">这是传送3</Teleport>
注意：必须dom存在才能传送
10、异步组件(提升性能)
Vue 提供了 defineAsyncComponent 方法来实现异步组件
<template>
<A></A>
<B></B>
<div ref="target">
<AsyncComp v-if="targetIsShow"></AsyncComp>
</div>
</template>
<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core'; // npm插件
import A from './A.vue';
import B from './B.vue';
const AsyncComp = defineAsyncComponent(() =>
import('./C.vue')
)
const target = ref<any>(null);
const targetIsShow = ref(false);
useIntersectionObserver(
target,
([{ isIntersecting }]) => {
if (isIntersecting) {
targetIsShow.value = isIntersecting
}
}
)
</script>
defineAsyncComponent 打包时做分包处理，异步组件是一个单独的js文件。
11、Mixin（混入）
含义：分发vue组件中可复用的功能。
注意：vue3中使用Hooks
// mixin.ts
import { ref } from "vue";
export default function() {
let num = ref(1);
let bel = ref(true)
const btn = () => {
num.value += 1
bel.value = false
setTimeout(() => {
bel.value = true
}, 3000);
}
return {
num,
bel,
btn
}
}
A组件使用
<template>
<div style="width:300px;height: 200px;background-color: #f60;">
<h1>A组件</h1>
{{ num }}
<button @click="btn">{{ bel }}</button>
</div>
</template>
<script setup lang="ts">
import mixin from '../mixin/mixin';
let { num, bel, btn } = mixin();
</script>
B组件使用
<template>
<div style="width:300px;height: 600px;background-color: blue;">
B组件
{{ num }}
<button @click="btn">{{ bel }}</button>
</div>
</template>
<script setup lang="ts">
import mixin from '../mixin/mixin';
let { num, bel, btn } = mixin();
</script>
12、Vue3生命周期
在组合API中，我们需要将生命周期钩子导入到项目中，才能使用，这有助于保持项目的轻量性。
import { onMounted } from 'vue'
除了 beforecate 和 created (它们被 setup 方法本身所取代)，我们可以在 setup 方法中访问的API生命周期钩子有9个选项
onBeforeMount – 在挂载开始之前被调用：相关的 render 函数首次被调用。
onMounted – 组件挂载时调用
onBeforeUpdate – 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
onUpdated – 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
onBeforeUnmount – 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
onUnmounted – 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
onActivated – 被 keep-alive 缓存的组件激活时调用。
onDeactivated – 被 keep-alive 缓存的组件停用时调用。
onErrorCaptured – 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
二、组件间通信
1、props父传子
-
父组件
<template> <SonVue msg="父组件的值" /> </template> -
子组件
<script setup lang="ts"> const props = defineProps( { msg: String } ) console.log(props); </script>
2、emit子传父
-
父组件
<template> <SonVue @getuser="getuser" /> </template> <script setup lang="ts"> const getuser = (val:string) => { console.log(val) } </script> -
子组件
<template> <button @click="buttonClick">传输</button> </template> <script setup lang="ts"> const emit = defineEmits(['getuser']) const buttonClick = ()=>{ emit('getuser','我是子组件传给父组件的值') } </script>
3、插槽通讯
-
匿名插槽
-
子组件
<template> <slot></slot> </template> -
父组件
<template> <SonVue> 插槽传递 </SonVue> </template>
-
-
具名插槽
-
父组件
<template> <SonVue> <template #title>这是具名插槽</template> </SonVue> </template> -
子组件
<template> <slot name="title"></slot> </template>
-
-
作用域插槽
-
含义
# 数据在子组件的自身，但根据数据生成的结构需要父组件决定 -
父组件
<template> <!-- 父组件将信息传递给子组件 --> <SonVue :person="person"> <!-- 子组件接收父组件的插槽中传的值 --> <template #tab="scope"> <tr v-for="(item, index) in scope.person" :key="index"> <th>{{ item.name }}</th> <th>{{ item.age }}</th> <th> <button>编辑</button> </th> </tr> </template> </SonVue> </template> <script setup lang="ts"> const person = [ { name: '小明', age: 20 }, { name: '小红', age: 18 } ] </script> -
子组件
<template> <table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> <slot name="tab" :person="props.person"></slot> </table> </template> <script setup lang="ts"> const props = defineProps<{ person: { name: string, age: number } }>() </script>
-
4、Provide / Inject
官网称为依赖注入，Provide 为提供，Inject为注入
-
Provide (提供)
-
父组件(祖先组件)
<template> <h1>我是父组件</h1> <SonVue></SonVue> </template> <script setup lang="ts"> import { provide, ref } from "vue"; let flag = ref<number>(10); provide("flag", flag); </script>
-
-
Inject (注入)
-
子组件(后代组件)
<template> <button>子组件</button> <div> {{ flag }} </div> <button @click="flag++">+1</button> </template> <script setup lang="ts"> import { inject, ref } from 'vue'; const flag = inject('flag',ref(1)) </script>
-
注意：Provide / Inject是具有响应式的，而且是单向数据流。
三、路由（vue插件）
1、安装vue-router
npm install vue-router
2、创建router文件
// src/router/index.js
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{
path: '/',
redirect: '/index'
},
{
path: '/index',
name: 'index',
component: () => import('../views/index/index.vue')
},
{
path: '/account',
name: 'account',
component: () => import('../views/account/index.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
});
export default router
3、全局引入router
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index.js'
createApp(App).use(router).mount('#app')
4、使用
-
app.vue设置路由出口
// App.vue <template> <router-view></router-view> </template> -
index.vue 跳转到 account.vue
<template> <div> <h1>首页</h1> <!-- 路由跳转方式 1 --> <router-link to="/account">去个人中心</router-link> <!-- 路由跳转方式 2 --> <button @click="gotoAccount">去个人中心</button> </div> </template> <script setup> import { useRoute, useRouter } from 'vue-router'; // useRoute 类似于 vue2 的 this.$route useRoute == this.$route // useRouter 类似于 vue2 的 this.$router useRouter == this.$router const router = useRouter(); const gotoAccount = () => { console.log(router); router.push('/account') } </script>
四、Typescript的支持
1、模板中的TS - 类型推断
<template>
{{ (x as number).toFixed(2) }} // 正确
{{ (<number>x).toFixed(2) }} // 正确
{{ x.toFixed(2) }} // IDE提示：类型“string | number”上不存在属性“toFixed”
</template>
<script setup lang="ts">
let x:string | number = 1
</script>
2、全局接口的抽取
1.src下定义types文件夹命名xx.d.ts
2.建立全局接口global.d.ts
interface globalInterface{
name:string
age:string
}
3.组件中直接使用
<script setup lang="ts">
const props = defineProps<{person:globalInterface[]}>()
</script>
4.如果不是在src下则需要在tsconfig.json中配置全局目录
{
{
...
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], //配置全局目录
"references": [{ "path": "./tsconfig.node.json" }]
}
3、类型增强
1.使用环境：全局定义的数据，函数在vue组件中直接访问报错
2.index.html中定义数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script>
const global=1
</script>
</body>
</html>
3.定义类型增强
// common.d.ts
declare const global:string;
4.组件中直接读取
<script setup lang="ts">
console.log(global)
</script>
4、父传子props通讯 - TS
-
父组件
<template> <SonVue msg="父组件传过来的值"></SonVue> </template> -
子组件
<template> {{ props.msg }} </template> <script setup lang="ts"> interface msgInterface{ msg:string } // withDefaults 帮助程序为默认值提供类型检查，并确保返回的 props 类型删除了已声明默认值的属性的可选标志。 const props = withDefaults(defineProps<msgInterface>(),{ msg:'dasdas' }) console.log(props.msg); </script>
5、子传父emit通讯 - TS
-
父组件
<template> <SonVue @getuser="getuser"></SonVue> </template> <script setup lang="ts"> const getuser = (a:number)=>{ console.log('我是父组件打印的值'); } </script> -
子组件
<template> <button @click="buttonClick">传输</button> </template> <script setup lang="ts"> const emit = defineEmits<{(e:'getuser',id:number):void}>() // (e: 事件名, 键名：类型): void const buttonClick = ()=>{ emit('getuser',1) } </script>
6、依赖注入类型推断
-
父组件（祖先组件）
<template> <button>我是父组件</button> <SonVue></SonVue> </template> <script setup lang="ts"> import { provide, ref } from 'vue'; let flag = ref<number>(99) provide('flag',flag) </script> -
子组件（后代组件）
<template> <h2>我是子组件</h2> <div>{{flag}}</div> <button @click="(flag as number)++">+1</button> </template> <script setup lang="ts"> import { Ref, inject, ref } from 'vue'; const flag:Ref<number | string> = inject('flag',ref(1)) </script>
五、指令的重构
1、v-model指令
-
父组件
<template> {{ num }} <HelloWorld v-model="num" /> </template> <script setup lang="ts"> import { ref } from 'vue'; import HelloWorld from './components/HelloWorld.vue'; const num = ref(1) </script> -
子组件
<template> <input type="text" v-model="value"> </template> <script lang="ts" setup> import { computed } from "vue"; const props = defineProps<{modelValue:number}>(); const emit = defineEmits<{(e:'update:modelValue',id:number):void}>(); const value = computed({ get(){ return + props.modelValue }, set(value){ emit('update:modelValue',+value) } }) </script> -
v-model原理
<template> {{ num }} <HelloWorld :modelValue="num" @update:modelValue="num = $event"/> </template> <script setup lang="ts"> import { ref } from 'vue'; import HelloWorld from './components/HelloWorld.vue'; const num = ref(1) </script>
2、自定义指令
2.1、自定义指令简单使用
-
全局自定义指令
// main.ts import { createApp } from 'vue' import './style.css' import App from './App.vue' const app = createApp(App) app.directive('focus',{ mounted(el){ el.focus() } }) app.mount('#app') -
使用自定义指令
<template> <input type="text" v-model="value" v-focus /> </template> <script lang="ts" setup> import { ref } from 'vue' let value = ref('全局自定义指令') </script> -
局部自定义指令
<template> <input type="text" v-focus /> </template> <script setup lang="ts"> const vFocus = { mounted: (el: any)=>{ el.focus() } } </script>
2.2、自定义指令详解
-
自定义指令的生命周期
<template> <!-- 自定义指令，参数，修饰符 --> <div v-move:a.x="{ background: 'red' }"></div> </template> <script setup lang="ts"> import type { Directive, DirectiveBinding } from 'vue'; type Dir = { background: string }; const vMove: Directive = { // 元素初始化的时候 created() { }, // 指令绑定到元素后调用 只调用一次 beforeMount() { }, // 元素插入父级dom调用 mounted(el: HTMLElement, dir: DirectiveBinding<Dir>) { console.log(dir.value.background); el.style.background = dir.value.background }, // 元素被更新之前调用 beforeUpdate() { }, // 元素被更新之后调用 改用updated updated() { }, // 在元素被移除前调用 beforeUnmount() { }, // 指令被移除后调用 只调用一次 unmounted() { } } </script> -
生命周期的简写
<template> <!-- 自定义指令，参数，修饰符 --> <div v-move:a.x="{ background: 'red' }">自定义指令生命周期简写</div> </template> <script setup lang="ts"> import type { Directive, DirectiveBinding } from 'vue'; type Dir = { background: string }; const vMove: Directive = (el: HTMLElement, dir: DirectiveBinding<Dir>)=>{ el.style.background = dir.value.background } </script> -
自定义拖拽指令
<template> <!-- 自定义指令，参数，修饰符 --> <div v-move style=" background-color: red; width: 200px; height: 200px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); "> <div style="background-color: black; width: 200px; color: white"> 自定义指令 </div> </div> </template> <script setup lang="ts"> import type { Directive } from 'vue'; const vMove: Directive = (el: HTMLElement) => { const move = (e: MouseEvent) => { console.log(e); el.style.left = e.clientX + 'px' el.style.top = e.clientY + 'px' } // 鼠标按下 el.addEventListener('mousedown', () => { // 鼠标按下拖拽 document.addEventListener('mousemove', move); // 鼠标松开 document.addEventListener('mouseup', () => { // 清除事件 document.addEventListener('mousemove', move) }); }) } </script>
3、响应式原理
3.1、了解Proxy代理
-
Proxy代理的get方法
<script> let obj = { name: "小明", age: 26, }; let agent = new Proxy(obj, { /* target表示obj这个对象 property表示读取的属性的key */ get(target, property) { console.log("执行了get方法"); return target[property]; }, }); console.log(agent.age); </script> -
Proxy代理的set方法
let obj = { name: "小明", age: 26, }; let agent = new Proxy(obj, { /* target表示obj这个对象 property表示读取的属性的key newValue表示设置的值 */ set(target, property, newValue) { console.log('执行了set方法'); target[property] = newValue return true }, }); agent.age=30 console.log(agent.age); 注意：定义 Proxy 代理对象的 set 的时候，要返回 return true ，特别是在严格模式下，否则， 会报错 'set' on proxy: trap returned falsish for property 'age'
3.2、了解Object.defineProperty
-
Object.defineProperty(对象.定义属性,用来为一个对象添加新属性)
<script> let person = { name: "小明", sex: '男', }; // 为 person对象 传输了一个新属性 “age”，并且设定它的值为 18 Object.defineProperty(person,'age',{ value : 18 }) console.log(person) </script> -
Object.defineProperty() 的get()方法
<script> let person = { name: '张三', sex: '男', } function Observer(obj) { const keys = Object.keys(obj) keys.forEach((key) => { Object.defineProperty(this,key,{ get() { return obj[key] } }) }) } const obs = new Observer(person) console.log(obs.sex); </script> -
Object.defineProperty() 的set()方法
<script> let person = { name: '张三', sex: '男', } function Observer(obj) { const keys = Object.keys(obj) keys.forEach((key) => { Object.defineProperty(this,key,{ set(val) { console.log('set方法调用了') obj[key] = val } }) }) } const obs = new Observer(person) obs.name=15 </script>