开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue2与Vue3 setup的使用差异与对比 -> 正文阅读

[JavaScript知识库]Vue2与Vue3 setup的使用差异与对比

最近一直在做vue2的技术栈升级，于是心血来潮，就想要不写篇文章总结一下vue2和vue3在使用上的不同吧，于是乎，我们这就开始吧！

在这里插入图片描述

首先说明一下，vue3有多种写法，本文使用setup语法糖，不考虑defineComponent的情况。

主要内容

1.`slot` 的用法

<el-tooltip placement="top">
  <!-- vue2 slot使用方式是任意标签设置属性【slot="slot名称"】 -->
  <div slot="content">自定义content信息</div>
  <el-button>Top center</el-button>
</el-tooltip>

<Tooltip placement="top">
  <!-- vue3 slot使用方式是template标签设置属性【#slot名称】 -->
  <template #content>
    <span>自定义content信息</span>
  </template>
  <Button>Top center</Button>
</Tooltip>

2.`props` 的用法

// vue2 使用option api风格，在props内定义父组件传入的props
export default {
	props: {
	    title: {
	      type: String,
	      default: '这是标题'
	    }
  },
}

<script setup lang="ts">
import { withDefaults, defineProps } from 'vue';

// vue3 使用defineProps定义父组件传入的props，同时可使用withDefaults定义属性默认值
const props = withDefaults(defineProps<{
  title: string;
}>(), {
  title: '这是标题'
});
</script>

3.`data` 数据的定义和修改

export default {
	data () {
		return {
			title: '新增'，
			formData: {
				username: '',
				password: ''
			}
		}
	},
	methods: {
		changeTitle () {
			this.title = '编辑'
		},
		changeFormData () {
			this.$set(formData, 'username', '章三')
			this.$set(formData, 'password', '000000')
		}
	}
}

import { ref, reactive } from 'vue';

const title = ref<string>('新增');
const formData = reactive({
	username: '',
	password: ''
})
const changeTitle = () => {
	title.value = '编辑'
}
const changeFormData = () => {
	formData.username = '章三'
	formData.password = '000000'
}

4.`emit` 事件定义

export default {
	methods: {
		submit () {
			const data = {}
			this.$emit('change', data)
		}
	}
}

import { defineEmits } from 'vue';

const emit = defineEmits(['change'])
const submit = () => {
	const data = {}
	emit('change', data)
}

5.`computed` 的使用

export default {
  computed: {
    userNames (userList) {
      return userList.map(user => user.name)
    }
  }
}

import { computed, ref } from 'vue';

const userList = ref<User[]>([])
const userNames = computed(() => userList.value.map(user => user.name))
// 下面为需要传值的情况
const userNames = computed(() => (userListParams: User[]) => {
  return userListParams.map(user => user.name)
});

6.`watch` 的使用

export default {
  watch: {
    userList: {
      handler: function (val) {
        // todo	
      },
      deep: true,
      immediate: true
    }
  },
}

import { watch, ref } from 'vue';

const userList = ref<User[]>([])

watch(
// 这里也可以直接写userList.value
  () => userList.value,
  () => {
    // todo
  },
  {
  	deep: true,
    immediate: true
  }
);

7. 父组件调用子组件内的方法

vue2
不需要额外的设置，直接通过this.$refs调用即可

父组件

<List ref="listRef" />

export default {
  mounted () {
	this.$refs.listRef?.getList()
  }
}

vue3
需要子组件通过 defineExpose方法先暴露出来父级需要用到的方法

父组件

<List ref="listRef" />

import { ref, onMounted } from 'vue';

const listRef = ref()

onMounted(() => {
	listRef.value?.getList()
})

子组件

import { defineExpose } from 'vue';

const getList = () => {
	// TODO
}

defineExpose({
	getList
})

8. router路由参数获取与路由跳转

vue2
直接使用this.$router调用录音方法，使用 this.$route获取路由参数

export default {
  mounted () {
  	const params = this.$route.query
	this.$router.push({
		path: '/page/list',
		query: {
			name: 'dxxxxx'
		}
	})
  }
}

vue3
需要引入 useRouter与useRoute并执行hooks后使用

import { onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

onMounted(() => {
	const params = route.query
	router.push({
		path: '/page/list',
		query: {
			name: 'dxxxxx'
		}
	})
})

9. provide与inject

vue2
父组件

export default {
   provide () {
    return {
      deleteFn: (id) => {
        // TODO
      },
      userName: '张三'
    }
  },
}

子组件使用

export default {
   inject: ['userName', 'deleteFn'],
}

vue3
父组件

import { provide, ref } from 'vue';

const deleteFn = (id: string) => {
  // TODO
}
const userName = ref<string>('张三')

provide('deleteFn', deleteFn);
provide('userName', userName);

子组件使用

import { inject, ref } from 'vue';

const deleteFn = inject('deleteFn');
const userName = inject('userName');

10. 生命周期函数

vue2 八个

beforeCreate created beforeMount mounted
beforeUpdate updated beforeDestroy destroyed

vue3 六个

onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted

说明：vue2中的beforeCreate和created对应的其实是vue3的setup

11. 页面路由拦截

如果使用的是vue3 setup语法糖来写组件，而有需要使用页面路由拦截来做一些事情的时候，处理起来会比较麻烦，需要结合vue3 defineComponent的写法来实现。当然，也可以直接整个页面都使用defineComponent而不是setup语法糖

export default {
   beforeRouteEnter (to, from, next) {
    // TODO
    next()
  },
}

vue3
需要注意的是，项目中可能因为重复引入vue和多个script标签而导致eslint报错，这时需要禁用掉当前行的eslint检查。

<script setup lang="ts">

import {
  ref, onMounted,
  // 这里是为了解决eslint报错问题
  // eslint-disable-next-line import/no-duplicates
} from 'vue';

...
</script>

<script lang="ts">
// 这里是为了解决eslint报错问题
// eslint-disable-next-line import/first, import/no-duplicates
import { defineComponent } from 'vue';

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    // TODO
    next();
  },
});
</script>

12. 动态循环component组件如何设置ref来使用子组件中的方法？

<component
  v-for="item in componentList"
  :is="item.name"
  :ref="`${item.name}-ref`"
  :key="item.name"
></component>

import PageA from './components/page-a.vue'
import PageB from './components/page-b.vue'

export default {
	data () {
		return {
			componentList: [
		        {
		          label: '页面A',
		          // value对应组件名
		          name: 'page-a'
		        },
		        {
		          label: '页面B',
		          name: 'page-b'
		        },
	      	],
	      	currentPage: 'page-a'
		}
	},
	mounted () {
		// 获取ref
		this.$refs[`${currentPage}-ref`]?.getData()
	}
}

vue2
vue3无法使用name直接用于component，需要传入真实的组件

<component
	v-for="item in componentList"
    :is="item.component"
    :ref="(el) => setTabRef(el, item.name)"
    :key="item.name"
></component>

import { ref, reactive, onMounted } from 'vue';

import PageA from './components/page-a.vue'
import PageB from './components/page-b.vue'


const componentList = ref([
  {
    label: '页面A',
    // value对应组件名
    name: 'pageA',
    // 这里需要传入真实的组件
    component: PageA
  },
  {
    label: '页面B',
    name: 'pageB',
    // 这里需要传入真实的组件
    component: PageB
  }
])

// 存储动态子组件的ref
const tabRefs = reactive<any>({});
const currentPage = ref('pageA')

const setTabRef = (el: any, key: string) => {
  tabRefs[key] = el;
};

onMounted(() => {
	// 获取ref
	tabRefs[currentPage]?.getData()
})

想法（仅个人）

vue2升级vue3的时间成本和技术代价有点高了，感觉这也是vue的一个缺点吧
vue3开放了多种写法，虽然选择比较自由，但不同写法又有不同的缺点，感觉这也是vue做的不够好的地方。比如defineComponent需要最后返回所有的数据和方法，不然template无法使用；比如setup语法糖下，无法使用路由拦截…
砥砺前行，vue的道路还很长~