小马Ti的博客

响应式数据的判断isRef：检查一个值是否为一个ref对象 isReactive：检查一个对象是否是由reactive创建的响应式代理 isReadonly：检查一个对象是否是由readonly创建的只读代理 isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理

初识setupVue3中的一个新的配置项，值为一个函数 1..setup是所有Composition API（组合API）表演的舞台2.组件中所用到的数据、方法等，都要配置在setup中3.setup函数的两种返回值：​ ①若返回一个对象，则对象中的属性、方法，在模板中均可直接使用 ​ ②若返回一个渲染函数，则可以自定义渲染内容 PS ①尽量不要与Vue2配置混用 Vue配置（data、methods、computed……）中可以访问到setup中的属性、方法; 但是在setup中不能访问到Vue2配置（data、methods、computed……）, 如果有重名，setup优先. ②setup不能是一个async函数，因为返回的不再是return的对象，而是promise，模板看不到return对象中的属性 注：后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合

关闭语法检查12345const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false})

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 其他改变