gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1377
阅读:1880回复:0

vue2.0和3.0的区别

楼主#
更多 发布于:2022-01-26 15:40
1. vue2和vue3双向数据绑定原理发生了改变
  1. vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。
  2. vue3 中使用了 es6 的 ProxyAPI 对数据代理。
相比于vue2.x,使用proxy的优势如下
defineProperty只能监听某个属性,不能对全对象监听
可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数 组内部数据的变化。


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


  1. 从vue引入reactive
  2. 使用reactive()方法来声名我们的数据为反应性数据
  3. 使用setup()方法来返回我们的反应性数据,从而我们的template可以获取这些反应性数据

[color='''rgba(0, 0, 0, 0.749019607843137)''']


import { reactive } from 'vue'

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

    return { state }
  }
}





3.默认项目目录结构也发生了变化: 移除了配置文件目录,config 和 build 文件夹
移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件

4. 2.0和3.0的生命周期对比

 2.0生命周期  3.0生命周期
 beforeCreate(组件创建之前)  setup(组件创建之前)
 created(组件创建完成)  setup(组件创建完成)
 beforeMount(组件挂载之前)  onBeforeMount(组件挂载之前)






 mounted(组件挂载完成)    onMounted(组件挂载完成)
beforeUpdate(数据更新,虚拟DOM打补丁之前)  onBeforeUpdate(数据更新,虚拟DOM打补丁之前)
 updated(数据更新,虚拟DOM渲染完成)  onUpdated(数据更新,虚拟DOM渲染完成)
 --------  --------

beforeDestroy(组件销毁之前)  onBeforeUnmount(组件销毁之前)

destroyed(组件销毁之后)  onUnmounted(组件销毁之后)


5.vue3特点


Vue2与Vue3 最大的区别 — Vue2使用选项类型API(Options API)对比Vue3合成型API(Composition API)
作用: 聚合代码 & 逻辑重用





6.知识点


使用defineComponent 构建应用及绑定事件
使用setup(props,content)父子通信
使用 reactive 绑定数据
使用 ref ( torefs ) 绑定数据
使用 getCurrentInstance 获取当前实例化对象上下文信息
watch、watchEffect 数据监听




1.使用 reactive 绑定数据


<template>
  <div>
    <h1>使用 reactive 绑定数据</h1>
    <p>pw_state.msg</p>
    <p>pw_info</p>
    <p>
      <button @click="changeMsg">changeMsg</button>
    </p>
  </div>
</template>
<script>

// Hooks 编程,在 vue 中导入对应的函数方法,面向函数式进行编程
// Vue-composition-API 这里就是Vue2与Vue3 最大的区别 — Vue2使用选项类型API(Options API)对比Vue3合成型API(Composition API)

import { defineComponent, reactive } from "vue";
export default defineComponent({
  name: 'test1',
  setup() {  // setup钩子函数
    // 使用响应式函数reactive构建proxy响应式对象state
    const state = reactive({
      msg: '时光'
    })
    console.log(state); // state对象是一个proxy拦截对象
    let info = 'hello'; // info是一个普通对象,修改后不会被proxy拦截,进而页面也不会动态更新
    const changeMsg = () => { // 在外边定义methods
      state.msg = '时光,你好'
      info = 'hello,你好'
    }
    return {  // 使用时,要把对象return出去,才能在template中使用
      state,
      info,
      changeMsg
    }
  }
})
</script>

————————————————
版权声明:本文为CSDN博主「星空之火@田兴」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43638968/article/details/114260999
游客


返回顶部