![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue小知识
屹洲城主
启明星的指引
展开
-
[vue小知识] Vue父子组件生命周期函数执行顺序 ===
单个Vue组件的生命周期是按照上图流程进行运转的,但是父子组件之间生命周期钩子函数运行流程又是什么样子的呢?<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>组件事件流测试</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"&...原创 2021-11-19 22:25:10 · 411 阅读 · 0 评论 -
[vue小知识] 前端路由和单页面应用的实现 ===
什么是单页面应用 (SPA) ?用一个页面来实现多个页面的功能单页面应用的特点?地址栏的变化导致内容的变化,但是整个页面并不刷新它的好处是第一次获取到index.html这个页面之后,再也不需要请求其他的页面了,所有的功能操作都在这一个页面中完成。实现路由功能由两种方式: hash模式。它主要是监听浏览器的hashchange事件。 history模式。它主要是调用history的pushState,replaceState方法,监听popstate事件。原创 2021-11-19 22:06:32 · 391 阅读 · 0 评论 -
[vue小知识] Vue跳转路由时的传参方式 ===
1.通过query 传参 , 可以通过 path ,也可以通过命名路由 (name)获取: this.$route.query2.通过 params 传参 , 必须通过命名路由的方式传递 (name)获取: this.$route.params区别:1.params 传参 , 必须通过命名路由的方式传递2.params传参,不会显示在地址栏中,刷新会丢失 可以配合 localStorage 使用...原创 2021-11-19 21:52:31 · 106 阅读 · 0 评论 -
[vue小知识] key的作用 ===
React 路由介绍现代的前端应用大多都是 SPA(单页应用程序),也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小,所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。前端路由的功能:让用户从一个视图(页面)导航到另一个视图(页面) 前端路由是一套映射规则,在React中,是 URL路径 与 组件 的对应关系 使用 React 路由简单来说就是:配置路径和组件(配对) ...原创 2021-11-19 21:38:37 · 407 阅读 · 0 评论 -
[vue小知识] 虚拟DOM
什么是虚拟DOM虚拟dom是相对于浏览器所渲染出来的真实dom而言的. 在vue和react技术出现之前,如果想要修改页面展示的内容,只能通过遍历查询DOM树的方式查找要修改的dom元素进行操作,从而达到更新ui的目的.这种方式相当消耗计算资源,因为每次查找DOM元素,几乎要遍历整棵DOM树,所以就建立了一个与DOM树相对应的虚拟DOM对象,简单理解就是javascript对象以对象嵌套的方法来表示DOM树的层级结构,那么每次DOM的更改就变成了js对象属性的增删改查,这样一来查找对象属性的方法原创 2021-11-19 16:31:34 · 741 阅读 · 0 评论 -
[vue小知识] 数据双向绑定的原理 ===
基本认知在vue2中,利用的是Object.defineProperty 去劫持对象的访问器(中的Getrer , Setter属性),当对象 属性值 发生变化时,可获取变化,然后根据变化来作后续响应;(它是一个一个的劫持,一次只能截取一个)在vue3中,则是通过 Proxy 代理对象进行类似的操作,劫持的是整个对象,只要对象中的属性变化了,都能劫持到Object.defineProperty 和 Proxy 的优缺点?Proxy1.可以直接监听整个对象,而非是对象的某个..原创 2021-11-19 14:00:24 · 364 阅读 · 0 评论 -
react 中的 事件绑定-事件对象-事件处理 ===
为什么要做事件绑定让页面有交互; 修改数据以更新视图格式<元素 事件名1={ 事件处理函数1 } 事件名2={ 事件处理函数2 } ></元素>注意:React 事件名采用驼峰命名法,比如:onMouseEnter、onFocus、 onClick .....示例import React from 'react'import ReactDOM from 'react-dom'const title = <h1>react中的事件&l..原创 2021-11-07 16:43:57 · 232 阅读 · 0 评论 -
[vue小知识] watch、methods 和 computed 的区别?
1. 基本说明 1.computed 是计算属性的对象2.methods 是方法集合的对象3.watch 是监听数据变动的对象2. 三者的加载顺序 1. computed 是在 HTML DOM 加载后马上执行的,如赋值;2. methods 则必须要有一定的触发条件才能执行,如点击事件 3. watch 是用于观察 Vue 实例上的数据变动。 3. 默认加载的时候先 computed 再 watch,不执行 methods; 4. 当触发某...原创 2021-11-07 15:52:54 · 88 阅读 · 0 评论 -
[vue小知识] v-show 和 v-if 指令的共同点和不同点?
1. 相同点: v-show 和 v-if 都能控制元素的显示和隐藏。 2. 不同点: 实现本质方法不同 v-show 本质就是通过设置 css 中的 display 设置为 none,控制隐藏 v-if 是动态的向 DOM 树内添加或者删除 DOM 元素3. 性能比较 v-show 只编译一次,后面其实就是控制 css,因此切换开销比较小,初始开销较大而 v-if 不停的销毁和创建,因此初始渲染开销较小,切换开销比较大4.适用场景如果要频繁切换...原创 2021-11-07 15:15:44 · 375 阅读 · 0 评论 -
[vue小知识] Vue 生命周期总共分为几个阶段?
Vue 实例从创建到销毁的过程,就是生命周期。有8个常用的:1. beforeCreate 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 2. created 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer), 属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。 3. beforeMount 在原创 2021-11-06 21:24:51 · 942 阅读 · 0 评论 -
[vue小知识] Object.defineProperty 和 Proxy 的区别?
1. Proxy 的优势如下: 1. Proxy 可以直接监听对象而非属性; 2. Proxy 可以直接监听数组的变化; 3. Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、 has 等等是 Object.defineProperty 不具备的; 4. Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修...原创 2021-11-06 21:15:42 · 329 阅读 · 0 评论 -
[vue小知识] Vue 数据双向绑定的原理是什么?
Vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 第一步:需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter 这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据 变化 第二步:compile 解析模板指令,将模板中的变量替换成数据,然后初始化原创 2021-11-06 21:11:48 · 95 阅读 · 0 评论 -
[vue的小知识]mvvm 和 mvc 区别是什么?哪些场景适合?
1.MVVM 基本定义MVVM 即 Model-View-ViewModel 的简写。即模型-视图-视图模型。模型 (Model)指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型 (ViewModel)是 mvvm 模式的核心,它是连接 view 和 model 的桥梁。它有两个方向:一是将模型(Model)转化成视图(View),即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将视图(View)转化成模型(Model), 即将所看到的页面转原创 2021-11-06 20:55:12 · 164 阅读 · 0 评论