做flash网站的软件,微营销是什么合法吗,手机百度经验首页登录官网,北京房屋装修公司哪家好1、对Vue设计原则的理解#xff1f;
渐进式JavaScript框架#xff1a;与其它大型框架不同的是#xff0c;Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层#xff0c;不仅易于上手#xff0c;还便于与第三方库或既有项目整合。另一方面#xff0c;当与现代化…1、对Vue设计原则的理解
渐进式JavaScript框架与其它大型框架不同的是Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue也完全能够为复杂的单页应用提供驱动。易用性vue提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应用的核心业务即可只要会写js、html和css就能轻松编写vue应用。灵活性渐进式框架的最大优点就是灵活性如果应用足够小我们可能仅需要vue核心特性即可完成功能随着应用规模不断扩大我们才可能逐渐引入路由、状态管理、vue-cli等库和工具不管是应用体积还是学习难度都是一个逐渐增加的平和曲线。高效性超快的虚拟DOM和diff算法使我们的应用拥有最佳的性能表现。追求高效的过程还在继续vue3中引入Proxy对数据响应式改进以及编译器中对于静态内容编译的改进都会让vue更加高效。 2、常见的Vue性能优化方法
路由懒加载{ path: /foo, component: () import(./Foo.vue) }使用keep-alive缓存页面使用v-show复用DOMv-for 遍历避免同时使用 v-if长列表性能优化如果是大数据长列表可采用虚拟滚动只渲染少部分区域的内容事件的销毁Vue 组件销毁时会自动解绑它的全部指令及事件监听器但是仅限于组件本身的事件。图片懒加载对于图片过多的页面为了加速页面加载速度所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载 等到滚动到可视区域后再去加载。img v-lazy/static/img/1.png第三方插件按需引入像element-ui这样的第三方组件库可以按需引入避免体积太大。无状态的组件标记为函数式组件template functional/template 3、Vue生命周期
Vue 实例有⼀个完整的⽣命周期也就是从开始创建、初始化数据、编译模版、挂载Dom - 渲染、更新 - 渲染、卸载 等⼀系列过程称这是Vue的⽣命周期。
beforeCreate创建前数据观测和初始化事件还未开始此时 data 的响应式追踪、event/watcher 都还没有被设置也就是说不能访问到data、computed、watch、methods上的方法和数据。created创建后 实例创建完成实例上配置的 options 包括 data、computed、watch、methods 等都配置完成但是此时渲染得节点还未挂载到 DOM所以不能访问到 $el 属性。beforeMount挂载前在挂载开始之前被调用相关的render函数首次被调用。实例已完成以下的配置编译模板把data里面的数据和模板生成html。此时还没有挂载html到页面上。mounted挂载后在el被新创建的 vm.$el 替换并挂载到实例上去之后调用。实例已完成以下的配置用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html 页面中。此过程中进行ajax交互。beforeUpdate更新前响应式数据更新时调用此时虽然响应式数据更新了但是对应的真实 DOM 还没有被渲染。updated更新后 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时组件 DOM已经更新所以可以执行依赖于DOM的操作。然而在大多数情况下应该避免在此期间更改状态因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。beforeDestroy销毁前实例销毁之前调用。这一步实例仍然完全可用this 仍能获取到实例。destroyed销毁后实例销毁后调用调用后Vue 实例指示的所有东西都会解绑定所有的事件监听器会被移除所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。另外还有 keep-alive 独有的生命周期分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁而是缓存到内存中并执行 deactivated 钩子函数命中缓存渲染后会执行 activated 钩子函数。 4、Vue 子组件和父组件执行顺序
加载渲染过程 1.父组件 beforeCreate 2.父组件 created 3.父组件 beforeMount 4.子组件 beforeCreate 5.子组件 created 6.子组件 beforeMount 7.子组件 mounted 8.父组件 mounted
更新过程 1. 父组件 beforeUpdate 2.子组件 beforeUpdate 3.子组件 updated 4.父组件 updated
销毁过程 1. 父组件 beforeDestroy 2.子组件 beforeDestroy 3.子组件 destroyed 4.父组件 destoryed 5、created和mounted的区别
created:在模板渲染成html前调用即通常初始化某些属性值然后再渲染成视图。mounted:在模板渲染成html后调用通常是初始化页面完成后再对html的dom节点进行一些需要的操作。 6、一般在哪个生命周期请求异步数据 可以在钩子函数 created、beforeMount、mounted 中进行调用因为在这三个钩子函数中data 已经创建可以将服务端端返回的数据进行赋值。 推荐在 created 钩子函数中调用异步请求因为在 created 钩子函数中调用异步请求有以下优点
能更快获取到服务端数据减少页面加载时间用户体验更好SSR不支持 beforeMount 、mounted 钩子函数放在 created 中有助于一致性。 7、keep-alive 中的生命周期哪些
keep-alive是 Vue 提供的一个内置组件用来对组件进行缓存——在组件切换过程中将状态保留在内存中防止重复渲染DOM。如果为一个组件包裹了 keep-alive那么它会多出两个生命周期deactivated、activated。同时beforeDestroy 和 destroyed 就不会再被触发了因为组件不会被真正销毁。当组件被换掉时会被缓存到内存中、触发 deactivated 生命周期当组件被切回来时再去缓存里找这个组件、触发 activated钩子函数。 8、Vue组件通信
1父子组件间通信
子组件通过 props 属性来接受父组件的数据然后父组件在子组件上注册监听事件子组件通过 emit 触发事件来向父组件发送数据。通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件子组件通过 $parent 获得父组件这样也可以实现通信。使用 provide/inject在父组件中通过 provide提供变量在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深只要调用了 inject 那么就可以注入 provide中的数据。 2兄弟组件间通信
使用 eventBus 的方法它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象通信的组件引入这个实例通信的组件通过在这个实例上监听和触发事件来实现消息的传递。通过 $parent/$refs 来获取到兄弟组件也可以进行通信。 3任意组件之间
使用 eventBus 创建一个事件中心相当于中转站可以用它来传递事件和接收事件。Vuex等 9、hash(哈希)路由和history路由介绍
hash指的是地址中#号以及后面的字符也称为散列值hash值会出现在URL里面但是不会出现在HTTP请求中对后端完全没有影响。所以改变hash值不会重新加载页面浏览器兼容好是开发中默认的模式hash变化对应的url都会被浏览器记录在历史访问栈中可以使用浏览器的前进后退功能虽然没有请求服务器但页面内容和url一一对应hash模式的工作原理是hashchange事件window就可以监听hash的变化而不需要向后端发起请求并按规则加载相应的代码history模式的URL中没有#它使用的是传统的路由分发模式即用户在输入一个URL时服务器会接收这个请求并解析这个URL然后做出相应的逻辑处理。特点 当使用history模式时URL就像这样http://abc.com/user/id。相比hash模式更加好看。但是history模式需要后台配置支持。如果后台没有正确配置访问时会返回404。 10、hash(哈希)路由和history路由两种模式对比
调用 history.pushState() 相比于直接修改 hash存在以下优势:pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL而 hash 只可修改 # 后面的部分因此只能设置与当前 URL 同文档的 URLpushState() 设置的新 URL 可以与当前 URL 一模一样这样也会把记录添加到栈中而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中而 hash 只可添加短字符串pushState() 可额外设置 title 属性供后续使用。hash模式下仅hash符号之前的url会被包含在请求中后端如果没有做到对路由的全覆盖也不会返回404错误history模式下前端的url必须和实际向后端发起请求的url一致如果没有对用的路由处理将返回404错误。
