keep-alive
摘要：keep-alive 是 Vue 的一个内置抽象组件，通常用于缓存动态组件或路由组件。 被 keep-alive 包裹的组件在切换时不会被销毁，而是会被缓存下来，下一次切换回这个组件时，会直接复用之前的实例，保持其状态。 keep-alive的几个配置属性和钩子： 1.include 和 exclu
阅读全文
posted @ 2024-12-12 14:56
随笔分类 - vue
响应式原理(Vue3、Vue2)
摘要：1.Vue3 副作用函数(onMounted、watchEffect) 帮助管理组件中的副作用逻辑，并自动追踪其依赖关系，以确保在数据变化时能够自动触发副作用函数的更新。 会自动追踪被其内部函数引用的响应式数据。当这些数据发生变化时，Vue 3 会自动重新运行副作用函数，确保副作用与数据的状态保持同
阅读全文
posted @ 2024-04-28 11:06
虚拟dom与diff算法
摘要：1.虚拟dom dom就是html文件里内容，一个页面由多个dom组成 <ul class="lists"> <li class="item">li1</li> <li class="item">li2</li> </ul> 而对应的虚拟dom是 tag: 'ul', attrs: { classN
阅读全文
posted @ 2021-12-16 14:57
watch与computed与props
摘要：props这个需要注意的是，不可以直接在子组件修改props过来的值。 若需修改，在子组件中用另一个变量接收； 且需同步时，将其变量回调给父组件。 注意：若传递的值为引用类型的，如array，object的 在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。 因为都是引用同一个内存地址 w
阅读全文
posted @ 2021-05-11 15:03
v-model与.sync组件通信
摘要：父组件： <template> <div class="hello"> <h1>{{ name }}</h1> <test v-model="name" /> <h1>{{ isShow }}</h1> <sonSync ref="test" :refbool.sync="isShow"></son
阅读全文
posted @ 2021-05-07 14:53
v-on="$listeners"和v-bind="$attrs"
摘要：常用于多层级组件之间的通信(>2层) 主要是在中间层组件使用：(注意中间层别接收需要向底层传递的参数) 高层级向底层级传值：（v-bind="$attrs"） 底层级向高层级调方法：（v-on="$listeners"） <template> <div> <div>{{ title }}</div>
阅读全文
posted @ 2021-05-06 16:44
mixin(混入)
摘要：看下官方介绍：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。 一个混入对象可以包含任意组件选项。 当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 通俗易懂的话来说一个.vue文件由template，script，style组成， 混入
阅读全文
posted @ 2021-03-26 10:40
vue插槽
摘要：什么是插槽，它是vue提出的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，使得模块分块，具有模块化特质。 插槽就是Vue实现的一套内容分发的API，将<slot></slot>元素作为承载分发内容的出口。 1.默认插槽 正常来说我们在组件里编写东西，在组件内是不展示的 但是在组件内加上
阅读全文
posted @ 2021-03-26 10:37
mvc与mvvm的设计思想
摘要：mvc: Model：数据模型，用来存储数据View：视图界面，用来展示UI界面和响应用户交互Controller：控制器(大管家角色)，监听模型数据的改变和控制视图行为、处理用户交互 mvvm: Vue为MVVM框架，当数据模型data变化时，页面视图会得到响应更新； 其原理对data的gette
阅读全文
posted @ 2021-03-26 09:51
vue源码学习--1.变化侦测篇(object)
摘要：// 源码位置：src/core/observer/index.js /** * Observer类会通过递归的方式把一个对象的所有属性都转化成可观测对象 */ export class Observer { constructor (value) { this.value = value // 给
阅读全文
posted @ 2021-03-09 14:10
vue通信
摘要：（1）父子组件间通信 第一种方法是子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事 件来向父组件发送数据。 第二种是通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组
阅读全文
posted @ 2021-02-24 15:45
vue里操作DOM
摘要：一般来说你要在vue里操作DOM，要先在标签里加上ref=“”，如下： <h2 ref="s" @click="sss">Essential Links</h2> 然后在点击的事件sss写下你想要的效果代码：（注意的是上面的ref的s，要写在下面this.$refs，不要忘了） methods: {
阅读全文
posted @ 2018-09-27 23:52
初步了解vue的组件
摘要：compoent引入组件1.先写好子组件x.vue，需要从父组件传变量到子组件； 在子组件里写：props：['xx']；为变量， 或者为props：{ title：{} }（注：与data是在同一级的） 用法{{xx}}即可；2.在全局样式里引用组件 import X from './compon
阅读全文
posted @ 2018-08-30 23:04
vue的路由的用法（router）
摘要：博主这几做一个vue的小项目经常用地路由，讲讲个人的浅薄的看法与使用： vue路由做跳转：（博主是用vue-cli脚手架新建的项目，这里就不谈了） 假设是从home.vue跳到newslist.vue 1.首先初始的页面ihome.vue然后做好要跳转的页面newslist。vue再在路由的js文件
阅读全文
posted @ 2018-08-28 01:49
vue的初始化
摘要：1.首先要有node.js 可以去node的官网去下载 https://nodejs.org/en/download/ 可以选择对应的版本，最好选LTS，比较稳定，下载后安装 在cmd,输入node -v 显示有版本号，则安装成功 2.因为npm是国外的，使用起来挺慢的，博主在这里推荐使用淘宝npm
阅读全文
posted @ 2018-08-23 22:27
