CaraYQ的博客

一、第一步：二、第二步：操作存储、读取数据一、是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它，它有三个概念：、、，相当于组件中的： 、 和 。具体编码：具体编码：二、组件中使用中的数据修改数据（三种方式）代码：在组件中的三种修改方法：storeToRefs看上面的代码发现，在模板中使用里面的时，都需要写我们能不能通过解构赋值将要用的数据从countStore中取出来，在模板中使用的时候直接写、、：，会发现在模板中使用的、、并不是响应式的，因为是新创建的变量，并不是

在终端输入以下命令，根据自己的需求做出相应的选择：生成的项目文件作用：setup概述在前被执行setup的语法糖setup()每次都要返回一个对象才能让使用，于是vue3提供了语法糖来改善这一现象：那这样又会出现另一个问题：有两个标签，我们可以使用如下插件并在vite.config.ts中引入插件将代码优化为：ref()创建响应式数据一、vue3使用和让数据变成响应式数据，其中，既可以定义基本类型的响应式数据，还可以定义对象类型的响应式数据，而只能定义对象类型的响应式数据二、语法：

目录创建Vue3.0工程使用vue-cli创建使用vite创建常用Composition API创建Vue3.0工程使用vue-cli创建一、官方文档二、相关指令查看@vue/cli版本，确保@vue/cli版本在4.5.0以上：vue --version安装或者升级你的@vue/cli：npm install -g @vue/cli创建时选择vue3：vue create vue_test启动：cd vue_test、npm run serve使用vite创建一、官方文档二、vi

目录nextTick过度与动画vue脚手架配置代理服务器插槽默认插槽具名插槽作用域插槽vuexnextTick一、语法：this.$nextTick(回调函数)二、作用：在下一次DOM更新结束后执行其指定的回调。三、什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。四、需求：点击【编辑】按钮后，出现编辑输入框，并且输入框已经获焦。五、思路：由todo.isEdit变量来控制输入框的展示和隐藏：<input type="text" v

目录vue脚手架vue-cli安装与使用脚手架结构render函数修改脚手架的默认配置ref属性props配置mixin(混入)插件vue脚手架vue-clivue-cli安装与使用（仅第一次执行）全局安装@vue/cli：npm install -g @vue/cli，安装好了之后，就多了个vue命令如果下载缓慢请配置npm淘宝镜像：npm config set registry https://registry.npm.taobao.org切换到你要创建项目的目录，然后使用命令创建

目录vue介绍vue介绍

目录Object.defineProperty() 方法defineReactive函数递归侦测对象全部属性Object.defineProperty() 方法Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。const object1 = {};// 在object1对象上定义property1属性的值value为42Object.defineProperty(object1, 'property1', { v

目录snabbdom简介安装测试环境搭建虚拟 DOM 和 h 函数虚拟 DOMh函数基本使用嵌套使用h函数源码手写h函数diff 算法snabbdom简介snabbdom：是瑞典语单词，单词原意为“速度”。是著名的虚拟 DOM 库，是 diff 算法的鼻祖，Vue 源码就是借鉴了 snabbdom官方 Git：https://github.com/snabbdom/snabbdom安装在 git 上的 snabbdom 源码是用 TypeScript 写的，git 上并不提供编译好的 Ja

目录v-modelVue2.0、Vue3.0双向数据绑定​vuex导航守卫路由（切换/跳转）模式hash模式history模式hash模式和history模式的区别：hash模式和history模式谁不会向服务器发送请求组件通信的方式生命周期及钩子函数keep-alivev-model可以用 v-model 指令在表单及元素上创建双向数据绑定（1）它会根据控件类型自动选取正确的方法来更新元素（2）它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理（3）v-model 会忽略所有