乐趣区

关于vue.js:面试官Vue2和3有什么区别

jiezi
  • 响应式原理 api 的扭转
    Vue2 响应式原理采纳的是 defineProperty，而 vue3 选用的是 proxy。这两者前者是批改对象属性的权限标签，后者是代理整个对象。性能上 proxy 会更加优良。
  • diff 算法，渲染算法的扭转
    Vue3 优化 diff 算法。不再像 vue2 那样比对所有 dom，而采纳了 block tree 的做法。此外从新渲染的算法里也做了改良，利用了闭包来进行缓存。这使得 vue3 的速度比 vue2 快了 6 倍。
  • 建设数据 data
    这里就是 Vue2 与 Vue3 最大的区别 — Vue2 应用 选项类型 API（Options API）比照 Vue3合成型 API（Composition API） 旧的选项型 API 在代码里宰割了不同的属性（properties）：data，computed 属性，methods，等等。新的合成型 API 能让咱们用办法（function）来宰割，相比于旧的 API 应用属性来分组，这样代码会更加简便和整洁。

区别于 vue2 组件写法，咱们在定义一个 vue2 的组件的时候，更多是通过一个对象来表白组件，像这样：

而在 vue3 中，咱们会通过办法的组合调用来实现组件的定义，像这样：、

vue2

export default {
  props: {title: String},
  data () {
    return {
      username: '',
      password: ''
    }
  }
}
相干 vue 实战视频解说：进入学习

Vue3 应用以下三步来建设反馈性数据:

  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
    组件来说，大多代码在 Vue2 和 Vue3 都十分类似。Vue3 反对碎片 (Fragments)，就是说在组件能够领有多个根节点。
    这种新个性能够缩小很多组件之间的 div 包裹元素。在开发 vue 的时候，咱们会发现每一个组件都会有个 div 元素包裹着。就会呈现很多层多余的 div 元素。碎片 (Fragments) 解决了这个问题。
  • 在 Vue3 的惟一真正的不同在于数据获取。Vue3 中的反馈数据（Reactive Data）是蕴含在一个反馈状态（Reactive State）变量中。— 所以咱们须要拜访这个反馈状态来获取数据值。
    vue2
<template>
  <div class='form-element'>
    <h2> {{title}} </h2>
    <input type='text' v-model='username' placeholder='Username' />
    <input type='password' v-model='password' placeholder='Password' />
    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{username + ' ' + password}}
    </p>
  </div>
</template>

vue3

<template>
  <div class='form-element'>
    <h2> {{state.title}} </h2>
    <input type='text' v-model='state.username' placeholder='Username' />
    <input type='password' v-model='state.password' placeholder='Password' />
    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{state.username + ' ' + state.password}}
    </p>
  </div>
</template>
  • Vue2 比照 Vue3 的 methods 编写
    Vue2 的选项型 API 是把 methods 宰割到独立的属性区域的。咱们能够间接在这个属性外面增加办法来解决各种前端逻辑。
export default {
  props: {title: String},
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {login () {// 登陆办法}
  }
}

Vue3 的合成型 API 外面的 setup()办法也是能够用来操控 methods 的。创立声名办法其实和声名数据状态是一样的。— 咱们须要先声名一个办法而后在 setup()办法中返回(return)，这样咱们的组件内就能够调用这个办法了。

export default {
  props: {title: String},
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })

    const login = () => {// 登陆办法}
    return { 
      login,
      state
    }
  }
}
  • 生命周期钩子 — Lifecyle Hooks
    在 Vue2，咱们能够间接在组件属性中调用 Vue 的生命周期的钩子。以下应用一个组件已挂载（mounted）生命周期触发钩子。
export default {
  props: {title: String},
  data () {
    return {
      username: '',
      password: ''
    }
  },
  mounted () {console.log('组件已挂载')
  },
  methods: {login () {// login method}
  }
}

当初 Vue3 的合成型 API 外面的 setup()办法能够蕴含了根本所有货色。生命周期的钩子就是其中之一！
然而在 Vue3 生周期钩子不是全局可调用的了，须要另外从 vue 中引入。和刚刚引入 reactive 一样，生命周期的挂载钩子叫 onMounted。

引入后咱们就能够在 setup()办法外面应用 onMounted 挂载的钩子了。

import {reactive, onMounted} from 'vue'

export default {
  props: {title: String},
  setup () {
    // ..

    onMounted(() => {console.log('组件已挂载')
    })

    // ...
  }
}
  • 计算属性 – Computed Properties
    咱们一起试试增加一个计算属性来转换 username 成小写字母。

在 Vue2 中实现，咱们只须要在组件内的选项属性中增加即可

export default {
  // .. 
  computed: {lowerCaseUsername () {return this.username.toLowerCase()
    }
  }
}

Vue3 的设计模式给予开发者们按需引入须要应用的依赖包。这样一来就不须要多余的援用导致性能或者打包后太大的问题。Vue2 就是有这个始终存在的问题。

所以在 Vue3 应用计算属性，咱们先须要在组件内引入 computed。

应用形式就和反馈性数据（reactive data）一样，在 state 中退出一个计算属性:

import {reactive, onMounted, computed} from 'vue'

export default {
  props: {title: String},
  setup () {
    const state = reactive({
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    })

    // ...
  }
  • 接管 Props
    接管组件 props 参数传递这一块为咱们带来了 Vue2 和 Vue3 之间最大的区别。—this 在 vue3 中与 vue2 代表着齐全不一样的货色。

在 Vue2，this 代表的是以后组件，不是某一个特定的属性。所以咱们能够间接应用 this 拜访 prop 属性值。就比方上面的例子在挂载实现后打印处以后传入组件的参数 title。

mounted () {console.log('title:' + this.title)
}

然而在 Vue3 中，this 无奈间接拿到 props 属性，emit events（触发事件）和组件内的其余属性。不过全新的 setup()办法能够接管两个参数：

props – 不可变的组件参数
context – Vue3 裸露进去的属性（emit，slots，attrs）
所以在 Vue3 接管与应用 props 就会变成这样：

setup (props) {
    // ...

    onMounted(() => {console.log('title:' + props.title)
    })

    // ...
}
  • 事件 – Emitting Events
    在 Vue2 中自定义事件是十分间接的，然而在 Vue3 的话，咱们会有更多的管制的自由度。

举例，当初咱们想在点击提交按钮时触发一个 login 的事件。

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

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

然而在 Vue3 中，咱们刚刚说过 this 曾经不是和 vue2 代表着这个组件了，所以咱们须要不一样的自定义事件的形式。

那怎么办呀？! ლಠ益ಠ)ლ

不必慌，在 setup()中的第二个参数 content 对象中就有 emit，这个是和 this.$emit 是一样的。那么咱们只有在 setup()接管第二个参数中应用合成对象法取出 emit 就能够在 setup 办法中随便应用了。

而后咱们在 login 办法中编写登陆事件：

setup (props, { emit}) {
    // ...

    const login = () => {
      emit('login', {
        username: state.username,
        password: state.password
      })
    }

    // ...
}

vue2

<template>
  <div class='form-element'>
    <h2> {{title}} </h2>
    <input type='text' v-model='username' placeholder='Username' />

    <input type='password' v-model='password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{username + ' ' + password}}
    </p>
  </div>
</template>
<script>
export default {props: {    title: String},  data () {    return {      username: '',      password:''}  },  mounted () {    console.log('title:' + this.title)  },  computed: {lowerCaseUsername () {return this.username.toLowerCase()    }  },  methods: {login () {this.$emit('login', {        username: this.username,        password: this.password})    }  }}
</script>

vue3

<template>
  <div class='form-element'>
    <h2> {{state.title}} </h2>
    <input type='text' v-model='state.username' placeholder='Username' />

    <input type='password' v-model='state.password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{state.username + ' ' + state.password}}
    </p>
  </div>
</template>
<script>
import {reactive, onMounted, computed} from 'vue'

export default {props: {    title: String},  setup (props, { emit}) {const state = reactive({      username: '',      password:'',      lowerCaseUsername: computed(() => state.username.toLowerCase())    })    onMounted(() => {      console.log('title:' + props.title)    })    const login = () => {      emit('login', {        username: state.username,        password: state.password})    }    return {login,      state}  }}
</script>
退出移动版