zoukankan      html  css  js  c++  java
  • vue嗯嗯

    https://juejin.im/post/5d153267e51d4510624f9809?tdsourcetag=s_pctim_aiomsg
    1,[vue] 在vue中watch和created哪个先执行?为什么? 
    在wacth监控数据时,设置immediate:true;会优先执行watch,created后执行;反之则反
    2,vue中mixins和extends有什么区别?
    extend用于创建vue实例
    mixins可以混入多个mixin,
    extends只能继承一个,mixins类似于面向切面的编程(AOP),extends类似于面向对象的编程,
    优先级Vue.extend>extends>mixins
    3,在vue中created与activated有什么区别

    使用<keep-alive>会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。

    被包含在 <keep-alive> 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated

    activated:在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。

    deactivated:在组件被停用时调用。

    注意:只有组件被 keep-alive 包裹时,这两个生命周期才会被调用,如果作为正常组件使用,是不会被调用,以及在 2.1.0 版本之后,使用 exclude 排除之后,

    就算被包裹在 keep-alive 中,这两个钩子依然不会被调用!另外在服务端渲染时此钩子也不会被调用的。

    什么时候获取数据?

    当引入keep-alive 的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

    我们知道 keep-alive 之后页面模板第一次初始化解析变成HTML片段后,再次进入就不在重新解析而是读取内存中的数据,即,只有当数据变化时,

    才使用VirtualDOM进行diff更新。有需要的话,页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

    所以,有需要的话,应该activated中留一份数据获取的代码,或者不要created部分,直接将created中的代码转移到activated中。
    4,在vue项目如何引入异步组件?
    {
    path: '/name',
    name: 'name',
    component: () =>
    import('../views/name.vue'),
    },
    5,vue中mixins有什么使用场景?

    import mixin from 'mixins/mixin';

    Vue.mixin(mixin)
    6,在vue项目中scss scoped穿透符>>>无效的解决方案有哪些?
    ::v-deep
    7,为什么在v-for中的key不推荐使用随机数或者index呢?那要怎么使用才比较好呢?
    因为在插入数据或者删除数据的时候,会导致后面的数据的key绑定的index变化,进而导致从新渲染,效率会降低
    8 ,你有用过预渲染技术吗?怎么做的?
    https://www.cnblogs.com/goloving/p/11380403.html
    9
    ,vue-loader在webpack编译流程中的哪个阶段?
    编译模板阶段:从入口文件出发,调用所有配置的Loader对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
    10,预渲染和SSR(服务端渲染)有什么区别?
    https://www.cnblogs.com/goloving/p/11380403.html
    11,使用vue如何判断页面是否编辑及编辑页面未保存离开时,给出弹窗提示
    beforeRouteLeave
    12, vue的.sync修饰符可以用表达式吗?为什么?

    Vue 本身是数据驱动渲染,所以数据(包括属性、计算属性等)变化可以触发界面数据呈现,但是界面的输入要反馈给组件,就需要用触发事件的方式来反馈。

    双向绑定是用于更新属性事件的语法糖,使用 :属性名.sync="..." 绑定。子组件中通过触发 update:属性名 事件来更新父组件中绑定的数据。

    比如:
    代码<my-comp :foo.sync="bar"></my-comp>
    会被扩展成<comp :foo="bar" @update:foo="val => bar = val"></comp>
    就是一个语法糖

    13,v-if和v-show哪个优先级更高?

    v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

    相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

    注意,v-show 不支持 <template> 元素,也不支持 v-else。

    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    此外,当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中,所以不推荐同时使用v-if 和 v-for。
    14,如何批量引入组件?

    vue中全局和局部引入批量组件方法

    一、全局批量引入

    创建一个.js文件,并在main.js中引入即可。
    二、局部批量引入

    15,vue的v-for如何倒序输出?
    采用reverse() 实现数组倒序排列
    16,
    axios全局使用

    import axios from 'axios' Vue.prototype.axios=axios
    17,
    v-if 是重排 v-show是重绘
    18,从0到1自己构架一个vue项目,说说有哪些步骤、哪些重要插件、目录结构你会怎么组织
    要看是vue.js还是vue cli项目,如果是vue.js可以按照普通web项目流程开发,只在代码架构上变为数据和模型分离的模式即可。
    如果是vue cli项目,不仅要分离数据和模型,还要理解vue router, vuex等组件,并且对于组件化的概念要更加透彻,由其是单页面应用,每个子页面如何组件化是必须在项目伊始就想清楚的。

    vue-cli实际上已经很成熟了,目录除了脚手架默认的,
    ,一般会额外创建views,components,api,utils,stores等;
    下载重要插件,比如axios,dayjs(moment太大),其他的会根据项目需求补充;
    、封装axios,统一api调用风格和基本配置;
    、如果有国际化需求,配置国际化;
    、开发,测试和正式环境配置,一般不同环境API接口基础路径会不一样;
    19,v-model的原理
    v-model是:value="msg" @input="msg=$event.target.value"的语法糖,其中:value="msg"是绑定了数据,value就是input输入框里的值;@input="msg=$event.target.value"

    就是监听input输入框里值的变化,然后改变值。一句话概括就是,绑定数据并且监听数据改变

     20,vue开发多语言项目
    https://www.cnblogs.com/rogerwu/p/7744476.html
    21,在使用计算属性的时,函数名和data数据源中的数据可以同名吗?
    不可以,同名会报错:The computed property "xxxx" is already defined in data
    22,怎么给vue定义全局的方法?
    通过prototype,这个非常方便。Vue.prototype[method]=method;
    通过mixin,Vue.mixin(mixins);
    23,vue2.0不再支持v-html中使用过滤器了怎么办

    在method中定义方法

    htmlFilter(htmlString){
    return htmlString.replace(/+s/g,'')
    }

    在vue中 v-html="htmlFilter(htmlString)"即可
    24,跟keep-alive有关的生命周期是哪些?描述下这些生命周期
    keep-alive的生命周期
    activated: 页面第一次进入的时候,钩子触发的顺序是created->mounted->activated
    deactivated: 页面退出的时候会触发deactivated,当再次前进或者后退的时候只触发activated
    25,vue渲染模板时怎么保留模板中的HTML注释呢?

    <template comments>
      ...
    </template>

    26,   vue设置 浏览器Title

    https://blog.csdn.net/qq_41810005/article/details/90699102

    27,   vue的:class和:style有几种表示方式?
    :class 绑定变量 绑定对象 绑定一个数组 绑定三元表达式
    :style 绑定变量 绑定对象 绑定函数返回值 绑定三元表达式
    28,



     

  • 相关阅读:
    谈谈golang的netpoll原理(一)
    谈谈高并发秒拍系统架构设计
    Go项目实战:打造高并发日志采集系统(十)
    Go项目实战:打造高并发日志采集系统(九)
    Go项目实战:打造高并发日志采集系统(八)
    Go项目实战:打造高并发日志采集系统(七)
    海思3520v300NDI协议移植
    支持ssl的boa服务器
    多字节和宽字节互相转换
    C++实现websocket协议通讯
  • 原文地址:https://www.cnblogs.com/ylblogs/p/13392978.html
Copyright © 2011-2022 走看看