小马Ti的博客

vite创建工程使用方法1.创建工程npm init vite-app 2.安装依赖npm install 3.运行npm run dev

watch监视ref的属性watch函数的第一个参数是监视的数据,第二个是监视函数的回调,第三个是其他配置项. 12345678910111213141516171819202122232425262728293031323334353637<template><h2>当前求和为：{{sum}}</h2> <button @click="sum++">点我+1</button> <hr> <h2>当前的信息为：{{msg}}</h2> <button @click="msg+='!'">修改msg</button></template><script>import {ref,watch} from 'vue'export default...

监视reactive定义的对象1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859<template> <hr> <h2>姓名：{{person.name}}</h2> <h2>年龄：{{person.age}}</h2> <h2>薪资：{{person.job.j1.salary}}</h2> <button @click="person.name+='~'">修改姓名</button> <button @click="person.age++">修改年龄</button> ...

watch时value的数据前置知识1.watch检测的时候，不能检测一个具体的值，而应该是一个结构。故对于监测sum，不能是watch(sum.value,…)而应该是watch(sum,…)，即监测的是sum的RefImpl结构 2.而对于监测person这样的对象，用ref函数修饰person（即ref(person)），在person的RefImpl中，value保存的是person的地址值。如果只写做watch(person,…)的话，person的内容改变但地址不变是监测不到的。但如果写成watch(person.value,…)，则相当于监测reactive修饰的person，默认开启深度监视，就可以监测到person内容的改变了 123456789101112131415161718192021let sum=ref(0)let person=ref({ name:"张三", age:18, job:{ j1:{ salary:20 ...

watchEffect函数watch的套路是：既要指明监视的属性，也要指明监视的回调 watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性 二者区别：​ 但computed注重的时计算出来的值（回调函数的返回值），所以必须要写返回值 ​ 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值

Vue3警告抑制1.全局禁用1234567module.exports = { rules: { 'vue/multi-word-component-names': 'off', 'no-unused-vars': 'off', },}; 2.特定文件可以在文件顶部添加以下注释： 12/* eslint-disable vue/multi-word-component-names *//* eslint-disable no-unused-vars */ 3.单行代码1234567891011// eslint-disable-next-line vue/multi-word-component-namesexport default { name: 'Demo',};// eslint-disable-next-line no-unused-varsexport default {...

Vue3的其他改变全局API 其他改变

Vue3生命周期 与Vue2的对应关系Vue3也提供了Composition API形式的生命周期钩子，与Vue2中钩子对应关系如下： beforeCreate===>setup() created===>setup() beforeMount===>onBeforeMount mounted===>onMounted beforeUpdate===>onBeforeUpdate updated===>onUpdated beforeUnmount===>onBeforeUnmount unmounted===>onUnmounted

原理总结实现原理： ​ 通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、、属性的添加。属性的删除等 ​ 通过Reflect（反射）：对被代理对象（源对象）的属性进行操作

Reflect1234567891011121314const p=new Proxy(data,{ // 拦截读取属性值 get(target,prop){ return Reflect.get(target,prop) }, //拦截设置属性值或添加新属性 set(target,prop,value){ return Reflect.set(target,prop,value) }, //拦截删除属性 deleteProperty(target,prop){ return Reflect.deleteProperty(target,prop) }})