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 · 448 阅读 · 0 评论 -
[vue小知识] 前端路由和单页面应用的实现 ===
什么是单页面应用 (SPA) ?用一个页面来实现多个页面的功能单页面应用的特点?地址栏的变化导致内容的变化，但是整个页面并不刷新它的好处是第一次获取到index.html这个页面之后，再也不需要请求其他的页面了，所有的功能操作都在这一个页面中完成。实现路由功能由两种方式： hash模式。它主要是监听浏览器的hashchange事件。 history模式。它主要是调用history的pushState,replaceState方法，监听popstate事件。原创 2021-11-19 22:06:32 · 429 阅读 · 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 · 144 阅读 · 0 评论 -
[vue小知识] key的作用 ===
React 路由介绍现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面） 前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系 使用 React 路由简单来说就是：配置路径和组件（配对） ...原创 2021-11-19 21:38:37 · 444 阅读 · 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 · 778 阅读 · 0 评论 -
[vue小知识] 数据双向绑定的原理 ===
基本认知在vue2中,利用的是Object.defineProperty 去劫持对象的访问器(中的Getrer , Setter属性),当对象 属性值 发生变化时,可获取变化,然后根据变化来作后续响应;(它是一个一个的劫持,一次只能截取一个)在vue3中,则是通过 Proxy 代理对象进行类似的操作,劫持的是整个对象,只要对象中的属性变化了,都能劫持到Object.defineProperty 和 Proxy 的优缺点?Proxy1.可以直接监听整个对象,而非是对象的某个..原创 2021-11-19 14:00:24 · 397 阅读 · 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 · 327 阅读 · 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 · 132 阅读 · 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 · 433 阅读 · 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 · 968 阅读 · 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 · 385 阅读 · 0 评论 -
[vue小知识] Vue 数据双向绑定的原理是什么?
Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据 变化 第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化原创 2021-11-06 21:11:48 · 148 阅读 · 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 · 194 阅读 · 0 评论