城乡建设部网官方网站,网站群建设招标,建设网站备案不通过怎么办,彩票娱乐网站建设说一说vue钩子函数 钩子函数是Vue实例创建和销毁过程中自动执行的函数。按照组件生命周期的过程分为#xff1a;挂载阶段 - 更新阶段 - 销毁阶段。 每个阶段对应的钩子函数分别为#xff1a;挂载阶段#xff08;beforeCreate#xff0c;created#xff0c;befor…说一说vue钩子函数 钩子函数是Vue实例创建和销毁过程中自动执行的函数。按照组件生命周期的过程分为挂载阶段 - 更新阶段 - 销毁阶段。 每个阶段对应的钩子函数分别为挂载阶段beforeCreatecreatedbeforeMountedmounted、更新阶段beforeUpdateupdated、销毁阶段beforeDestroydestroyed 完整的父子组件生命周期执行顺序是 加载渲染过程父beforeCreate — 父created — 父beforeMount — 子beforeCreate — 子created — 子beforeMount — 子mounted — 父mounted 组件更新过程父beforeUpdate — 子beforeUpdate — 子updated — 父updated 销毁过程父beforeDestroy — 子beforeDestroy — 子destroyed — 父destroyed 组件通信的方式 父子通讯props$emit$refs 兄弟通讯事件总线eventBus的$emit、$on 祖孙通讯provide inject或者 $attr $listener 复杂通讯vuex Vuex是什么每个属性是干嘛的如何使用 Vuex是全局状态管理仓库相当于window对象挂载了一个全局变量。 属性 1. state数据存储 2. getter类似于计算属性 3. mutations存放同步方法 4. actions存放异步方法 5. modules模块划分 computed和watch的区别 computed是计算属性依赖其他属性值并且有缓存。只有当依赖的属性值发生变化后才会重新计算。不支持异步操作。 watch更多的是监听观察作用。当监听的值发生变化会立即执行对应的回调。支持异步操作。 说一说v-if和v-show区别 v-if和v-show都可用于控制元素显示隐藏。区别是v-if是直接操作dom元素的添加与删除而v-show通过设置元素css属性disply:none来控制是否显示。v-if性能不及v-show。 v-if和v-for可以用于一个标签吗 v-if 和 v-for 一起使用时v-for 优先于 v-if 执行就意味着需要遍历一整个数组影响速度。所以不建议一起使用。 说一说vue的keep-alive 1. keep-alive是vue的内置组件能在组件切换过程中保留组件状态防止DOM重复渲染。 2. keep-alive有三个属性include-匹配的组件缓存exclude-排除匹配的组件其他都缓存max-最多能缓存的组件数。 3. 可以配合路由使用在相应组件mate下设置keep-alive: true。 vue中$nextTick的作用和原理 vue更新dom节点是异步操作数据更新之后视图不是马上更新的。所以修改数据后获取到的dom节点不是最新的。nextTick是在当前渲染完成后执行的所以在nextTick中能获取到更新后的dom。 说一说vue列表为什么要加key vue列表加key的目的是为diff算法添加标识。diff算法判断新旧VDOM是否相同的依据是节点的tag和key。如果tag和key相同则会进一步进行比较使得尽可能多的节点进行复用。 key绑定的值一般是一个唯一的值比如id。例如绑定数组的索引index一旦数组内元素进行增删后续节点的绑定的key也会发生变化导致diff进行多余的更新操作。 说一说vue-router实现懒加载的方法 懒加载的核心思想是按需加载。不用到时不加载。有利于性能优化。 实现懒加载有两种方式 1. es6的import方式。const Home  ()import(./home.vue) 2. vue中异步组件进行懒加载。const Home  resolve require([./home.vue],  resolve) 说一说HashRouter和HistoryRouter的区别和原理 区别 1. HashRouter和HistoryRouter是前端路由的两种模式。history利用浏览历史记录栈的api实现hash是监听location对象hash值变化事件实现。 2. history的url没有#号hash有#号。需要url更优雅时可以使用history模式 3. 相同的urlhistory会触发添加到浏览器历史记录栈中hash不会触发history需要后端配合如果后端不配合刷新新页面会出现404hash不需要。 原理 HashRouter原理通过window.onhashchange方法获取新URL中hash值再做进一步处理 HistoryRouter原理通过history.pushState 使用它做页面跳转不会触发页面刷新使用window.onpopstate 监听浏览器的前进和后退再做其他处理 说一说Vue2.0双向绑定的原理和缺陷 原理vue2通过数据劫持结合发布者-订阅者模式来实现数据双向绑定。通过Object.defineProperty来劫持数据的setter、getter在数据变动时发布消息给订阅者订阅者收到消息后进行相应的处理。 缺陷只能监听初始化实例中的data数据动态添加值不能响应。 Vue3.0如何实现数据双向绑定 采用proxy来劫持整个对象相比于vue2的Object.defineProperty能够动态监听添加的属性可以监听数组长度和index变化问题。 vue2和vue3的区别 1. 双向绑定的原理不同。vue2是通过数据劫持结合发布订阅模式实现。vue3是使用proxy对数据进行代理。2. 根结点vue2只能有一个根结点vue3支持多个结根节。3. 写法不同vue3写法相对灵活vue2结构相对固定mothods,computed,data,watch这些都是固定的vue3可以通过方法来分模块。这一点也容易让代码结构看上去比较混乱4. 生命周期不同。vue2: beforeCreate,created, beforeMount, mounted, beforeUpdate, update。 vue3: setUp-开始创建组件onBeforeMount, onMounted, onBeforeUpdate, onUpdatevue3生命周期在使用之前需要先引入 vue和react有什么区别 1. 核心思想不同。Vue核心思想是尽可能的降低前端开发门槛使用MVVM框架。React核心思想是声明式渲染和组件化。react既不属于MVC也不属于MVVM架构。2. 数据流不同。Vue使用双向绑定React是单向数据流。3. 语法不同。Vue使用模版语法来处理数据绑定和渲染。React使用的是jsx语法将HTML和JavaScript结合在一起。4. 组件通讯不。Vue提供了props和$emit来进行父子通讯。React通过props和回调函数来实现组件通讯。 React生命周期各个阶段是什么 React生命周期主要说的是类组件的生命周期函数式组件没有生命周期可用hooks来模拟一些生命周期的回调 生命周期是组件从创建到销毁的这个过程主要分为三个阶段挂载阶段组件第一次在DOM树中被渲染的过程更新阶段组件状态发生变化重新更新渲染的过程卸载阶段组件从DOM树中被移除的过程 常见的生命周期函数有1. Constructor组件中第一个调用的生命周期函数。constructor中通常只做两件事情1. 通过给this.state 赋值对象来初始化内部state。2. 为事件绑定this。2. renderrender() 方法是 类组件中唯一必须实现的方法。3. componentDidMount组件挂载后立即调用。 依赖DOM的操作可在此处进行。 官方建议发送网络请求最好的地方。4. componentDidUpdate5. componentWillUnmount React组件间传值的方法有哪些 1. props 2. context 3. refs setState是同步还是异步 同步代码异步表现。setState本身并不是异步的但由于react的性能优化机制体现为异步。只有在原生和定时器中为同步。 React事件绑定原理 react中事件绑定都不是绑定在对应的DOM上的而是统一绑定在document上采用事件冒泡形式向上传递。 采用合成事件的原因 1. 兼容所有浏览器实现跨平台开发。 2. 统一挂载在document上减少内存消耗。方便组件 挂载/销毁 时统一 订阅/移除 事件。 3. 方便统一管理。 React有哪些hookshooks的优缺点是什么 常用hooks useState设置和使用状态属性。 useEffect副作用钩子可以用来模拟部分生命周期。 useCallBack记忆函数防止组件重新渲染起到缓存作用。 useRef保存引用值。 useContext共享状态。组件传值 hooks优点 1. 让函数组件拥有自己的状态和生命周期。 2. 解决业务逻辑难以拆分问题。 3. 使状态逻辑复用变得简单可行。 hooks缺点 hooks的useEffect只包括了三个生命周期compoentsDidMount、componentDidUpdate、componentWillUnmount并没有涵盖所有生命周期。