标签 vue 下的文章 - 杀死一只知更鸟

Vue项目中使用防抖

触发高频事件后n秒内函数只会执行一次，如果在n秒内高频事件再次被触发，则重新计算时间。简单的说也就是一定时间段的无论点击多少次，只会执行最后一次的调用，前面的会被清除。<template> <el-input v-model="text" @input="debounceInput" /> </template> <script> export default { mounted () { this.debounceInput = this.debounce(this.handle, 1000,false) }, data () { return { text: '', debounceInput: () => {}, } }, methods: { handle (value) { console.log(value) },

技术 · 2023-09-14

Vue项目中使用防抖

vue 父组件如何修改子组件中的data数据

在项目开发中，需要在父组件中触发函数，自动修改子组件中的data值，来实现子组件的data数据的变化。使用vue的ref参数就可以实现了。父组件代码部分<template> <div> <button @click="changeChildValue">点击改变子组件的data值</button> <children ref="child"></children> </div> </template> <script> import children from "./children" export default { components:{ children }, methods: { changeChildValue() { this.$refs.child.isName= '我是小红';

技术 · 2023-09-14

vue 父组件如何修改子组件中的data数据

Vue监视数据的原理

1.vue会监视data中所有层次的数据。2.如何监测对象中的数据?通过setter实现监视，且要在new Vue时就传入要监测的数据。(1).对象中后追加的属性，Vue默认不做响应式处理(2).如需给后添加的属性做响应式，请使用如下API: Vue.set(target，propertyName/index， value) 或 vm.$set(target，propertyName/index， value）3.如何监测数组中的数据?通过包裹数组更新元素的方法实现，本质就是做了两件事: (1).调用原生对应的方法对数组进行更新。 (2).重新解析模板，进而更新页面。4.在Vue修改数组中的某个元素一定要用如下方法: 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse() 2.Vue.set() 或 vm.$set()特别注意: Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性!

技术 · 2023-08-30

Vue监视数据的原理

vue2中watch的深度监视

深度监视:(1).Vue中的watch默认不监测对象内部值的改变 (一层)。(2).配置deep:true可以监测对象内部值改变 (多层)。备注:(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

技术 · 2023-08-23

vue2中watch的深度监视

vue2监视属性watch

1.当被监视的属性变化时，回调函数自动调用，进行相关操作2.监视的属性必须存在，才能进行监视3.监视的两种写法:(1).new Vue时传入watch配置(2).通过vm.$watch监视

技术 · 2023-08-23

vue2监视属性watch

Vue中的数据代理

1.通过vm对象来代理data对象中属性的操作 (读/写)2.Vue中数据代理的好处:更加方使的操作data中的数据3.基本原理:通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作 (读/写) data中对应的属性。

技术·面试 · 2023-08-23

Vue中的数据代理

Object.defineProperty()方法

let number = 18 let person = { name:'张三', sex:'男' } Object.defineProperty(person,'age',{ value:18, enumerable:true, //控制属性是否可以枚举，默认值是false writable:true, //控制属性是否可以被修改，默认值是false configurable:true, //控制属性是否可以被删除，默认值是false //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get(){ console.log('有人读取age属性了') return number }, //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value){ console.log('有人修改了age属性，且值是',value) n

技术 · 2023-08-23

Object.defineProperty()方法

vue2计算属性对比methods

计算属性:1.定义：要用的属性不存在，要通过已有属性计算得来。2.原理：底层借助了objcet.defineProperty方法提供的getter和setter。3.get函数什么时候执行?(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。4.优势: 与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便5.备注:1.计算属性最终会出现在vm上，直接读取使用即可。2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

技术 · 2023-08-21

vue2计算属性对比methods

vue路由的hash模式和history模式有什么区别?

1.hash的路由地址上有#号，history模式没有2.在做回车刷新的时候，hash模式会加载对应页面，history会报错4043.hash模式支持低版本浏览器，history不支持，因为是H5新增的API4.hash不会重新加载页面，单页面应用必备5.history有历史记录，H5新增了pushstate()和replaceState()去修改历史记录，并不会立刻发送请求6.history需要后台配置

面试 · 2023-08-08

vue路由的hash模式和history模式有什么区别?

vue面试题：你是如何理解MVVM的?

MVVM是Model-view-ViewModel的缩写，是前端开发的架构模式M: 模型，对应的就是data的数据V:视图，用户界面，DOMVM: 视图模型: Vue的实例对象，连接view和Model的桥梁核心是提供对View和ViewModel的双向数据绑定，当数据改变的时候，ViewModel能监听到数据的变化，自动更新视图，当用户操作视图的时候，ViewModel也可以监听到视图的变化，然后通知数据进行改动，这就实现了双向数据绑定。ViewModel通过双向绑定把View和Model连接起来，他们之间的同步是自动的，不需要人为干涉，所以我们只需要关注业务逻辑即可，不需要操作DOM，同时也不需要关注数据的状态问题，因为它是由MVVM统一管理。

面试 · 2023-08-07

vue面试题：你是如何理解MVVM的?

Theme Jasmine by Kent Liao