侧边栏壁纸
  • 累计撰写 2,058 篇文章
  • 累计创建 73 个标签
  • 累计收到 20 条评论

目 录CONTENT

文章目录

从开发的角度谈VUE3.0和VUE2.0语法上的不同

大猿本猿
2023-07-31 / 199 阅读 / 1,301 字

前言:本篇文章只做VUE3.0和VUE2.0语法上的不同分析,不做性能和源码架构等的分析。

VUE3.0和VUE2.0代码结构不同

  • VUE3.0代码实例🌰

也可以不用写setup函数,可以直接把setup写到script标签上

  • VUE3.0代码实例🌰
  • 相应的VUE2.0代码实例🌰

VUE2.0和VUE3.0的代码对比一下:

VUE2.0是将mounted、data、computed、watch之类的方法作为VUE对象的属性进行导出。

VUE3.0新增了一个名为setup的入口函数,value, computed, watch, onMounted等方法都需要从外部import。

​​image​​

关于VUE3.0和VUE2.0生命周期

  • VUE2.0生命周期 1、beforeCreate:在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用

2、created:在实例创建完成后被立即同步调用。在这一步中,实例已完成对选项的处理,意味着以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。然而,挂载阶段还没开始,且 $el property 目前尚不可用。

3、beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。

4、mounted:在实例挂载完成后被调用。

5、beforeUpdate:在数据发生改变后,DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器。

6、updated:在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

7、activated:被 keep-alive 缓存的组件激活时调用。

8、deactivated:被 keep-alive 缓存的组件失活时调用。

9、beforeUnmount:在卸载组件实例之前调用。在这个阶段,实例仍然是完全正常的。

10、unmounted:卸载组件实例后调用。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。

​​image​​

  • VUE3.0生命周期

1、setup: 同VUE2.0的beforeCreate和created。

2、onBeforeMount:同VUE2.0的beforeMount。

3、onMounted:同VUE2.0的mounted。

4、onBeforeUpdate:同VUE2.0的beforeMount。

5、onUpdated:同VUE2.0的updated。

6、onBeforeUnmount:同VUE2.0的beforeUnmount。

7、onUnmounted:同VUE2.0的unmounted。

8、onMounted:同VUE2.0的beforeMount。

9、onActivated:同VUE2.0的activated。

10、onDeactivated:同VUE2.0的deactivated。

​​image​​

VUE3.0和VUE2.0响应式

  • VUE3.0响应数据

1、ref():让简单类型的数据变成响应式数据。这种数据是Number或者String等基本类型数据,这种数据是通过值而非引用传递的类型。

2、reactive(): 让复杂类型数据变成响应式,不需要.value包裹。

注意:当ref作为响应式对象的值被更改时,ref的内部值也会发生改变。

注意:使用ES6解构响应式对象时,响应式会丢失。

对于这种情况,我们需要将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联,使用toRefs():

watch监听属性

  • VUE3.0 watch监听
    import { ref, watch } from 'vue'
    const counter = ref(0) watch(counter, (newValue, oldValue) => { console.log('The new counter value is: ' + counter.value) })
  • VUE2.0 watch监听
    export default { data() { return { counter: 0 } }, watch: { counter(newValue, oldValue) { console.log('The new counter value is: ' + this.counter) } } }

computed计算属性

  • VUE3.0 computed计算
    import { ref, computed } from 'vue'
    const counter = ref(0) const twiceTheCounter = computed(() => counter.value * 2)
    counter.value++ console.log(counter.value) // 1 console.log(twiceTheCounter.value) // 2
  • VUE2.0 computed计算
    Vue.createApp({ data() { return { counter: 0 } }, computed: { twiceTheCounter() { return counter * 2 } } }).mount('#demo')

父子组件通过props传递值

  • VUE3.0 props
    MyBook.vue export default { props: { title: String }, setup(props) { console.log(props.title) } }

或者

  • VUE2.0 props
    export default { name: 'Demo', props: { count: { type: Number, default: 1 }, arrValue: { type: Array, default () { return [] } } }, mounted() { console.log(this.count) } }

emit子组件向父组件抛出事件

  • VUE2.0

VUE2.0可以通过this.$emit()向父组件抛出事件

  • VUE3.0
    setup(props, { emit }) { const close = ()=>{ emit("change")
    } return{ close } }

$refs

  • VUE2.0

vue2.0可以直接通过this.$refs.访问子组件

  • VUE3.0

注意:1、通过变量的命名要和ref相同。 2、通过ref来访问子组件的方法,子组件要通过expose将事件和变量暴露出来,这样父组件才能访问到

VUE3.0 context

  • VUE2.0

VUE2.0可以通过this来访问VUE实例上的方法和变量。例如this.emit、this.emit、this.refs、this.$slots.

  • VUE3.0

context 是一个普通 JavaScript 对象,暴露了其它可能在 setup 中有用的值:

注意:在setup时,你只能访问props、attrs、slots、emit。无法访问data、computed、methods、refs (模板 ref)

更多细节可看VUE官方文档:v3.cn.vuejs.org/guide/compo…

从开发的角度谈VUE3.0和VUE2.0语法上的不同