- 博客(63)
- 收藏
- 关注
RSS订阅原创 Vue3.0—其它 Composition API
如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。-isProxy: 检查一个对象是否是由`reactive` 或者 `readonly` 方法创建的代理。-使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。-shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。-作用：将一个由```reactive```生成的响应式对象转为普通对象。
2023-02-22 14:23:45
187
1
原创 Vue3.0—toRef与toRefs
扩展：```toRefs``` 与```toRef```功能一致，但可以批量创建多个 ref 对象，语法：```toRefs(person)```- 语法：```const name =toRef(person,'name')```- 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。- 应用: 要将响应式对象中的某个属性单独提供给外部使用时。
2023-02-22 14:23:10
192
1
原创 Vue3.0—hook函数
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。- 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。- 类似于vue2.x中的mixin。## 9.自定义hook函数。
2023-02-03 14:11:05
412
1
原创 Vue3.0—watchEffect函数Vue
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。-但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。-而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。- watch的套路是：既要指明监视的属性，也要指明监视的回调。### 3.watchEffect函数。
2023-02-03 14:08:15
147
原创 Vue3.0—Watch监视ref定义的数据
监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。-监视reactive定义的响应式数据中某个属性时：deep配置有效。- 与Vue2.x中watch配置功能一致。
2023-02-03 14:05:40
1297
原创 Vue3.0—reactive对比ref
ref通过``Object.defineProperty()``的```get```与```set```来实现响应式（数据劫持）。- 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过```reactive```转为代理对象。- ref定义的数据：操作数据需要```.value```，读取数据时模板中直接读取不需要``.value```。- reactive定义的数据：操作数据与读取数据：均不需要```.value```。- reactive用来定义：对象（或数组）类型数据。
2023-02-03 14:00:38
108
原创 Vue3.0—reactive函数及响应式原理
语法：```const 代理对象= reactive(源对象)```接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）-对象类型：通过```Object.defineProperty()```对属性的读取、修改进行拦截（数据劫持）。-通过Proxy（代理）: 拦截对象中任意属性的变化,包括：属性值的读写、属性的添加、属性的删除等。- 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用```ref```函数）-reactive定义的响应式数据是“深层次的”。
2023-02-03 13:56:58
279
原创 Vue3.0—ref函数
ref函数- 作用: 定义一个响应式的数据- 语法: ```const xxx = ref(initValue)``` -创建一个包含响应式数据的引用对象（reference对象，简称ref对象） - JS中操作数据： ```xxx.value``` -模板中读取数据: 不需要.value，直接：```{{xxx}}```- 备注： -接收的数据可以是：基本类型、也可以是对象类型。 -基本类型的数据：响应式依然是靠``Object.defineProperty()``的``
2023-02-03 13:55:01
170
原创 Vue3.0—setup
attrs:值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于```this.$attrs```。- Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。- 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。- emit: 分发自定义事件的函数, 相当于 ```this.$emit```。- slots:收到的插槽内容, 相当于 ```this.$slots```。
2023-02-03 13:54:03
196
原创 Vue3.0—简介+创建工程
1.Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）耗时2年多、github上的tags地址：2.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking......3.拥抱TypeScriptVue3可以更好的支持TypeScript4.新的特性。
2023-02-03 13:50:33
135
原创 elemrnt UI 应用
然后，将 .babelrc 修改为：（新版本里文件名为：babel.config.js），我们可以只引入需要的组件，以达到减小项目体积的目的。7.1 移动端常用 UI 组件库。7.2 PC 端常用UI 组件库。
2023-02-01 22:21:29
99
原创 路由器的两种工作模式
2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。—— #及其后面的内容就是hash值。2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。hash模式不会出现问题（因为路径#后面不会带给服务器去发请求）1. 地址中永远带着#号，不美观。2. 兼容性和hash模式相比略差。能生成 .css .html .js 文件。若使用history模式，刷新会出问题。
2023-02-01 22:20:17
113
原创 Vue—生命周期钩子补充
1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。2. ```deactivated```路由组件失活时触发。1. ```activated```路由组件被激活时触发。### 11.两个新的生命周期钩子。
2023-02-01 22:08:55
63
原创 Vue——缓存路由组件
1. 作用：让不展示的路由组件保持挂载，不被销毁。不包括在include里的依旧会被销毁。include里的名字为组件名！组件在哪里展示就在哪里更改代码。### 10.缓存路由组件。
2023-02-01 22:08:31
176
原创 Vue-router—router-link的replace属性
2. 浏览器的历史记录有两种写入方式：分别为```push```和```replace```，```push```是追加历史记录，```replace```是替换当前记录。路由跳转时候默认为```push```3. 如何开启```replace```模式：```News```### 8.``````的replace属性。replace模式的历史纪录会被覆盖，即不能进行回退操作。
2023-02-01 22:05:26
123
原创 Vue-router—params参数
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！1. 配置路由，声明接收params参数。### 6.路由的params参数。
2023-02-01 22:01:20
210
原创 Vue-router—query与命名路由
name:'hello'//给路由命名。>跳转### 4.路由的query参数。1. 作用：可以简化路由的跳转。### 5.命名路由。
2023-01-29 22:11:23
168
原创 Vue-router—基本使用
1. 路由组件通常存放在```pages```文件夹，一般组件通常存放在```components```文件夹。4. 整个应用只有一个router，可以通过组件的```$router```属性获取到。1. 安装vue-router，命令：```npm i vue-router```3. 每个组件都有自己的```$route```属性，里面存储着自己的路由信息。2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。2. 应用插件：```Vue.use(VueRouter)```
2023-01-29 22:08:50
73
原创 Vuex—简介+简单使用
3. 组件中修改vuex中的数据：```$store.dispatch('action中的方法名',数据)``` 或 ```$store.commit('mutations中的方法名',数据)```> 备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写```dispatch```，直接编写```commit```1. 初始化数据、配置```actions```、配置```mutations```，操作文件```store.js```
2023-01-29 22:07:18
253
1
原创 Vue—实现动画、过度效果
3. 备注：若有多个元素需要过度，则需要使用：``````，且每个元素都要指定```key```值。1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。你好啊！2.v-enter-active：进入过程中。2.v-leave-active：离开过程中。3.v-enter-to：进入的终点。3.v-leave-to：离开的终点。1.v-enter：进入的起点。1.v-leave：离开的起点。
2023-01-29 21:56:34
670
原创 Vue—全局事件总线
回调留在A组件自身。4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。Vue.prototype.$bus = this//安装全局事件总线，$bus就是当前应用的vm。1. 一种组件间通信的方式，适用于任意组件间通信
2023-01-29 21:54:09
146
原创 Vue—组件的自定义事件
1. 第一种方式，在父组件中：`````` 或 ``````3. 若想让自定义事件只能触发一次，可以使用```once```修饰符，或```$once```方法。4. 触发自定义事件：```this.$emit('atguigu',数据)```6. 组件上也可以绑定原生DOM事件，需要使用```native```修饰符。5. 解绑自定义事件```this.$off('atguigu')```
2023-01-29 21:52:33
113
原创 Vue—webStorage
3. ```xxxxxStorage.getItem(xxx)```如果xxx对应的value获取不到，那么getItem的返回值是null。该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。该方法接受一个键名作为参数，并把该键名从存储中删除。4. ```JSON.parse(null)```的结果依然是null。该方法接受一个键名作为参数，返回键名对应的值。2.LocalStorage存储的内容，需要手动清除才会消失。该方法会清空存储中的所有数据。
2023-01-29 21:49:57
113
原创 Vue—插件
2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。对象.install = function (Vue, options) {// 3. 配置全局混入(合)// 1. 添加全局过滤器。// 2. 添加全局指令。// 4. 添加实例方法。1. 功能：用于增强Vue。
2023-01-25 22:40:12
67
原创 Vue—mixin混入
局部混入：```mixins:['xxx'] ```全局混入：```Vue.mixin(xxx)```1. 功能：可以把多个组件共用的配置提取成一个混入对象。## mixin(混入)
2023-01-25 22:39:34
170
原创 Vue—prop配置
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。2. 第二种方式（限制类型）：```props:{name:String}```1. 第一种方式（只接收）：```props:['name'] ```2. 传递数据：``````default:'老王' //默认值。type:String, //类型。## props配置项。
2023-01-25 22:38:17
180
原创 Vue—ref属性
1. 打标识：```.....``` 或 ``````2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）2. 获取：```this.$refs.xxx```1. 被用来给元素或子组件注册引用信息（id的替代者）
2023-01-25 22:37:27
65
原创 分析Vue脚手架(CLI)
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用。(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；1. 使用vueinspect > output.js可以查看到Vue脚手架的默认配置。①main.js 整个项目的入口文件 （可以直接在main.js中直接运行）vue中的template可以被解析，但是main.js里的不能被解析。(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
2023-01-25 22:36:49
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人