精华内容
下载资源
问答
  • vue2和vue3区别面试题
    2021-12-29 15:30:29


    2020年9月发布的正式版
    vue3支持大多数的vue2的特性
    vue中设计了一套强大的组合APi代替了vue2中的option API,复用性更强了
    更好的支持TS
     最主要:vue3中使用了Proxy配合Reflect 代替了vue2中ob ject.defineProperty()方法实现数据的响应式(数据代
    理)
    重写了虚拟DOM,速度更快了
    新的组件:Fragment(片段)/Teleport(瞬移)/suspense(不确定)
    设计了一个新的脚手架工具,vite
     

    更多相关内容
  • 多次面试整理的技术点,有效帮助快速面试
  • 【经典面试题vue2vue3区别

    千次阅读 2022-05-19 09:00:47
    vue2和vue3双向数据绑定原理发生了改变 二. Vue3支持碎片(Fragments) 三. Composition API 四. 建立数据 data 五. 生命周期钩子 — Lifecyle Hooks 六.父子传参不同,setup() 函数特性 七. vue3 Teleport瞬移...

    目录

    一. vue2和vue3双向数据绑定原理发生了改变

    二. Vue3支持碎片(Fragments)

    三. Composition API

    四. 建立数据 data

    五. 生命周期钩子 — Lifecyle Hooks

    六.父子传参不同,setup() 函数特性

    七. vue3 Teleport瞬移组件


    一. vue2和vue3双向数据绑定原理发生了改变

    vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

    vue3 中使用了 es6 的 ProxyAPI 对数据代理。

    相比于vue2.x,使用proxy的优势如下

    1. defineProperty只能监听某个属性,不能对全对象监听
    2. 可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
    3. 可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

    二. Vue3支持碎片(Fragments)

    就是说在组件可以拥有多个根节点。

    vue2

    <template>
      <div class='form-element'>
          <h2> {{ title }} </h2>
      </div>
    </template>
    

    vue3

    <template>
      <div class='form-element'>
      </div>
      <h2> {{ title }} </h2>
    </template>
    

    三. Composition API

    Vue2与Vue3 最大的区别 — Vue2使用选项类型API(Options API)对比Vue3合成型API(Composition API)

    旧的选项型API在代码里分割了不同的属性: data,computed属性,methods,等等。新的合成型API能让我们用方法(function)来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁

    vue2 

    
    export default {
      props: {
        title: String
      },
      data () {
        return {
          username: '',
          password: ''
        }
      },
      methods: {
        login () {
          // 登陆方法
        }
      },
      components:{
                "buttonComponent":btnComponent
            },
      computed:{
    	  fullName(){
    	    return this.firstName+" "+this.lastName;     
    	  }
    }
     
    }
    
    

    vue3 

    export default {
      props: {
        title: String
      },
      
      setup () {
        const state = reactive({ //数据
          username: '',
          password: '',
          lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性
        })
         //方法
        const login = () => {
          // 登陆方法
        }
        return { 
          login,
          state
        }
      }
    }
    

    四. 建立数据 data

    Vue2 - 这里把数据放入data属性中

    export default {
      props: {
        title: String
      },
      data () {
        return {
          username: '',
          password: ''
        }
      }
    }
    
    

     在Vue3.0,我们就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。

    使用以下三步来建立反应性数据:

    1. 从vue引入reactive
    2. 使用reactive()方法来声名我们的数据为响应性数据
    3. 使用setup()方法来返回我们的响应性数据,从而我们的template可以获取这些响应性数据
    import { reactive } from 'vue'
    
    export default {
      props: {
        title: String
      },
      setup () {
        const state = reactive({
          username: '',
          password: ''
        })
    
        return { state }
      }
    }
    

    template使用,可以通过state.username和state.password获得数据的值。

    <template>
      <div>
        <h2> {{ state.username }} </h2>
      </div>
    </template>
    
    

    五. 生命周期钩子 — Lifecyle Hooks

    Vue2--------------vue3
    beforeCreate  -> setup()
    created       -> setup()
    beforeMount   -> onBeforeMount
    mounted       -> onMounted
    beforeUpdate  -> onBeforeUpdate
    updated       -> onUpdated
    beforeDestroy -> onBeforeUnmount
    destroyed     -> onUnmounted
    activated     -> onActivated
    deactivated   -> onDeactivated
    
    • setup() :开始创建组件之前,在beforeCreate和created之前执行。创建的是data和method
    • onBeforeMount() : 组件挂载到节点上之前执行的函数。
    • onMounted() : 组件挂载完成后执行的函数。
    • onBeforeUpdate(): 组件更新之前执行的函数。
    • onUpdated(): 组件更新完成之后执行的函数。
    • onBeforeUnmount(): 组件卸载之前执行的函数。
    • onUnmounted(): 组件卸载完成后执行的函数
    • 若组件被<keep-alive>包含,则多出下面两个钩子函数。
    1. onActivated(): 被包含在中的组件,会多出两个生命周期钩子函数。被激活时执行 。
    2. onDeactivated(): 比如从 A组件,切换到 B 组件,A 组件消失时执行。

    六.父子传参不同,setup() 函数特性

    总结:
    1、setup 函数时,它将接受两个参数:(props、context(包含attrs、slots、emit))

    2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数

    3、执行 setup 时,组件实例尚未被创建(在 setup() 内部,this 不会是该活跃实例的引用,即不指向vue实例,Vue 为了避免我们错误的使用,直接将 setup函数中的this修改成了 undefined)

    4、与模板一起使用:需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)

    5、使用渲染函数:可以返回一个渲染函数,该函数可以直接使用在同一作用域中声明的响应式状态

    注意事项:

    1、setup函数中不能使用this。Vue 为了避免我们错误的使用,直接将 setup函数中的this修改成了 undefined)

    2、setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。但是,因为 props 是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性。

    如果需要解构 prop,可以通过使用 setup 函数中的toRefs 来完成此操作:
    父传子,props

    import { toRefs } from 'vue'
     
    setup(props) {
    	const { title } = toRefs(props)
     
    	console.log(title.value)
    	 onMounted(() => {
          console.log('title: ' + props.title)
        })
    
    }
    

    子传父,事件 - Emitting Events

    举例,现在我们想在点击提交按钮时触发一个login的事件。

    在 Vue2 中我们会调用到this.$emit然后传入事件名和参数对象。

    login () {
          this.$emit('login', {
            username: this.username,
            password: this.password
          })
     }
    

    在setup()中的第二个参数content对象中就有emit,这个是和this.$emit是一样的。那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

    然后我们在login方法中编写登陆事件
    另外:context 是一个普通的 JavaScript 对象,也就是说,它不是响应式的,这意味着你可以安全地对 context 使用 ES6 解构
     

    
    setup (props, { attrs, slots, emit }) {
        // ...
        const login = () => {
          emit('login', {
            username: state.username,
            password: state.password
          })
        }
    
        // ...
    }
    

    3、 setup()内使用响应式数据时,需要通过.value获取

    import { ref } from 'vue'
     
    const count = ref(0)
    console.log(count.value) // 0
    

    4、从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加 .value

    5、setup函数只能是同步的不能是异步的

    七. vue3 Teleport瞬移组件

    Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件",
    他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的
    以一个例子来看:编写一个弹窗组件

    <template>
    <teleport to="#modal">
      <div id="center" v-if="isOpen">
        <h2><slot>this is a modal</slot></h2>
        <button @click="buttonClick">Close</button>
      </div>
    </teleport>
    </template>
    <script lang="ts">
    
    export default {
      props: {
        isOpen: Boolean,
      },
      emits: {
        'close-modal': null
      },
      setup(props, context) {
        const buttonClick = () => {
          context.emit('close-modal')
        }
        return {
          buttonClick
        }
      }
    }
    </script>
    <style>
      #center {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        background: white;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
      }
    </style>
    
    

    在app.vue中使用的时候跟普通组件调用是一样的

    <template>
    <div id="app">
      <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
      <HooksDemo></HooksDemo>
      <button @click="openModal">Open Modal</button><br/>
    <modal :isOpen="modalIsOpen" @close-modal="onModalClose"> My Modal !!!!</modal>
    </div>
      
    </template>
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    import HooksDemo from './components/HooksDemo.vue'
    import Modal from './components/Modal.vue'
    import{ref} from 'vue'
    export default {
      name: 'App',
      components: {
        HelloWorld,
        HooksDemo,
        Modal
      },
      setup() {
        const modalIsOpen = ref(false)
        const openModal = () => {
          modalIsOpen.value = true
        }
        const onModalClose = () => {
          modalIsOpen.value = false
        }
        return {
          modalIsOpen,
          openModal,
          onModalClose
        }
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    
    
    

    要是在app.vue文件中使用的时候,modal是在app的 DOM节点之下的,父节点的dom结构和css都会给modal产生影响
    于是产生的问题

    • modal被包裹在其它组件之中,容易被干扰
    • 样式也在其它组件中,容易变得非常混乱

    Teleport 可以把modal组件渲染到任意你想渲染的外部Dom上,不必嵌套在#app中,这样就可以互不干扰了,可以把Teleport看成一个传送门,把你的组件传送到任何地方
    使用的时候 to属性可以确定想要挂载的DOM节点下面

    <template>
      <teleport to="#modal">
        <div id="center">
          <h2>柏特better</h2>
        </div>
      </teleport>
    </template>
    
    

    在public文件夹下的index.html中增加一个节点

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
      </head>
      <body>
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <div id="modal"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    
    

    这样可以看到modal组件就是没有挂载在app下,不再受app组件的影响了

    展开全文
  • 【前端面试题Vue2和Vue3区别

    千次阅读 2022-02-06 19:13:07
    【前端面试题Vue2和Vue3区别

    一、数据双向绑定原理

    Vue2使用的是Object.defineProperty()进行数据劫持,结合发布订阅的方式实现。
    Vue3使用的是Proxy代理,使用ref或者reactive将数据转化为响应式数据。

    二、数据和方法的定义

    Vue2使用的是选项类型API(Options API),Vue3使用的是合成型API(Composition API)。

    Vue2:
    data() { return {}; }, methods:{ }
    Vue3:
    数据和方法都定义在setup中,并统一进行return{}

    三、生命周期

    Vue2:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed。
    在这里插入图片描述

    Vue3:

    选项式 APIHook inside setup
    beforeCreateNot needed*
    createdNot needed*
    beforeMountonBeforeMount
    mountedonMounted
    beforeUpdateonBeforeUpdate
    updatedonUpdated
    beforeUnmountonBeforeUnmount
    unmountedonUnmounted
    errorCapturedonErrorCaptured
    renderTrackedonRenderTracked
    renderTriggeredonRenderTriggered
    activatedonActivated
    deactivatedonDeactivated

    四、获取props

    vue2:console.log(‘props’,this.xxx)
    vue3:setup(props,context){ console.log(‘props’,props) }

    五、给父组件传值emit

    vue2:this.$emit()
    vue3:setup(props,context){context.emit()}

    以上就是vue2和vue3的一部分区别。

    展开全文
  • vue2vue3对比

    1.抱歉:Vue3没有研究那么深,不太清楚。

    2.

    2020年9月发布的正式版

    Vue3支持大多数Vue2的特性

    Vue3中设计了一套强大的组合API代替了Vue2中的option API,复用性更强了

    更好的支持了TS

    最主要的:Vue3中使用了Proxy配合Reflect 代替了Vue2中的Object.defineProperty()方法实现数据的响应式(数据代理)

    重写了虚拟DOM,速度更快了

    新的组件:Fragment(片段)/ Teleport(瞬移) / Suspense(不确定)

    设计了一个新的脚手架工具,vite

    展开全文
  • vue面试题汇总

    2021-01-03 12:35:29
    2.vue响应式原理 vue的响应式 3.单向数据流双向数据流 单向数据流:数据流动方向可以跟踪,流动单一。缺点是写起来不太方便。要使视图发生变更就必须创建各种action来维护对应的state。 双向数据流:数据视图双...
  • 一、uni-app Vue2区别 1、组件/标签的变化 以前是html标签,现在是小程序标签。 div 改成 view span、font 改成 text a 改成 navigator img 改成 image input 还在,但type属性改成了confirmtype ...
  • 由于疫情原因,原本每年的“金三银四”仿佛消失,随之而来的是找工作的压力,这里给要面试的小伙伴们总结了到目前为止我遇到的前端面试题,仅供参考哦,第一次写博客,如有错误之处,还请指出。 一. vue方面 1.vue-...
  • 前端面试题: 精选Vue面试题及答案.pdf
  • 2022前端面试系列——Vue面试题.pdf
  • vue2.03.0的区别面试必备~)

    万次阅读 2021-01-07 21:10:53
    1.vue2.03.0的初始化就存在着一定区别,比如vue3.0可以在安装脚手架同时提前安装好一些项目开发必备的插件,并且3.0提供了可视化创建脚手架,可以更加方便的对插件依赖进行管理配置,同时两个版本的目录结构也...
  • 主要介绍了react和vue区别分析,在面试中经常会遇到,小编通过实例文字相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue-loader 模块允许 webpack 使用单独的加载模块 (例如 SASS 或 SCSS 加载器) 提取处理每个人部分。该设置使我们可以使用 Vue 文件无缝编写程序。 vue-loader 模块还允许把静态资源视为模块依赖性,并允许使用 ...
  • 面试必备: 2021 Vue经典面试题总结.pdf
  • 【前端面试题Vue2 Vue3 中computedwatch的使用和区别
  • 主要介绍了vue2和vue3的v-if与v-for优先级对比学习,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 经典面试题: 2021Vue经典面试题总结(含答案).pdf
  • 包含vue常问面试题和vue3源码学习笔记 包含react常问面试题 包含vue的react的比较
  • 最全vue面试题+详解答案.pdf
  • 面试官:Vue3有了解过吗?能说说跟Vue2区别吗?

    万次阅读 多人点赞 2021-01-08 08:31:00
    一、Vue3介绍关于vue3的重构背景,看看尤大怎么说:「Vue 新版本的理念成型于 2018 年末,当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久,...
  • 2021年前端vue面试题大汇总(附答案).pdf
  • vue常见的面试题

    2021-01-07 04:40:30
    vue面试题汇集 vue面试题汇总二 vue面试总结三 vue面试题汇总四 vue面试题汇总五 vue面试题汇总六 axios是什么?怎么使用?描述使用它来实现登录功能的流程 1.axios是基于promise使用浏览器好node.js的一个http客服...
  • 2021Vue面试题笔记.pdf

    2021-12-14 17:32:30
    2021Vue面试题笔记.pdf
  • 看了很多关于vue组件传值的文章,于是想把文章总结一下,把关于vue组件传值好好聊聊,欢迎大家指正。 组件之间传值主要分两种 1、父子组件:props方法、ref方法、childrenparent方法、 emit方法 2、非父子组件:...
  • 2022vue最新面试题.pdf

    2021-12-14 17:32:37
    2022vue最新面试题.pdf
  • Vue常见面试题及网友回答,收集来自阿里云社区,包括v-model, key, methods,错误处理,参数传递,父子组件,定时器,vue声明周期等问题
  • vue面试——2021最全面的vue基础面试题.pdf
  • 整理的vue20道经典面试题,由初级到中高级,高级部分可以忽略
  • vue面试题及答案_vue面试问题及答案.pdf

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,280
精华内容 13,712
关键字:

vue2和vue3区别面试题

友情链接: ePWM_PRC.zip