这篇博文主要对一些刚入门vue框架的同学，以及对vue基本知识进行巩固的，最后就是精简一下基本知识，以方便自己查看，感谢参考，有问题评论区交流，谢谢。
vue如何新建项目请参考：VUE 3.0 如何新建项目 详细教程 附环境搭建 推荐-CSDN博客
目录
1.computed使用
计算属性 computed 本身也是一个变量，可以理解为就是计算之后返回的数据。一定先在import引入computed，下面代码展示中addNum 就是computed 返回的值，在模板变量中直接使用 {{addNum}} 输出结果为3。
注意：如果执行add方法使num1和num2的值分别加1，那么addNum的值也会跟着变化。
2.路由 Router
在vue项目中，页面的跳转请求是必不可少的，即vue Router，路由有histiry和hash模式。我们可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。
2.1 如何配置路由？
- 首先在import中引入 createRouter 从vue-router中，以及需要配置路由所用到的组件；
- 配置路由数组数据。根据需要配置路由的路径以及该路径对应的组件；
- 创建createRouter路由对象；
- 导出路由。
histiry和hash模式异同，使用hash模式配置路由，地址栏会多出一个# 符号 推荐使用history模式。
2.2如何跳转路由？
- 在需要跳转的组件 import引入 useRouter
- 定义一个router
- 通过router中的push函数添加要跳转的路由对应的路径
router中的push也可以写成对象的形式
结果如下，成功跳转至about页面。
另外 router还提供了几种常用的方法。router.back()退回页面，代码如下：
等同于 router.go(-1)；
2.3路由传参
这里分别新建一个 about 和 detail 组件 来通过路由传递参数，在router.push中query传递，如果包含对象数据，最好先转成字符串。
可以看到在detail组件地址栏中接收到传的参数。
在detail组件中接收路由传递的参数，并且打印route.query的值。
这里可以看出detail组件通过路由传递的值已经成功拿到了，通过query传递的参数都是字符串
除了通过上面的query传参，还能通过params传参
注意：params传参配置路由信息需要配置name属性
使用params传参时name属性不能少，不然数据是空的。query传参path和name都可以，params传参必须使用name。params传参不会显示在地址栏中。
在vue4.14版本之后做了更新，删除了未使用的params，所以得到的值是空的，并且报错了
可参考：路由params传参拿不到值
3.vue常用的生命周期
3.1setup() 组件创建的过程，
3.2onMounted()组件挂载
onMounted()主要组件的挂载过程，发请求，初始化dom数据，接收路由传递的参数。
3.3onUnmounted() 组件卸载
4.父子组件传值
这里两个组件分别时detail父组件 和 child 子组件。
4.1父组件向子组件传值
通过子组件动态绑定属性，在例子中向子组件传递了一个名字为msg的值，值就是return返回的msg的值。
子组件接收 通过props，接收额值不能直接修改，在模板中可以直接使用{{msg}}，这里数据校验时string类型，如果传递其他类型会报错。
从父组件接收非string类型的数据报警告错误。
除了type校验，还有require，和 default 属性。
require默认为false，父组件不传递值子组件值为undefined，如果设置为true，如果父组件不传值，子组件接收不到值就会报错，
default默认值，如果设置了默认值，父组件传递值就接收父组件传递的值，如果父组件未传值就显示默认值。
4.2子组件传递参数给父组件
还是detail父组件和child子组件。
子组件通过emit分发事件传递数据，分发出去一个事件和参数。
不是只有点击按钮才会分发事件，在onMounted组件挂载的时候就可以分发事件的。
父组件接收，父组件模板接收也是在子组件上 代码中1的部分@send 这个send是子组件分发过来的方法，'send' 是自定义方法。第二部分send方法中的参数就是子组件传递过来的值。
子组件向父组件传递多个参数时，1.数组的方式传递，2对象传递。
前面写过vue3 其他基础知识汇总 请参考：vue3.0 入门基础知识汇总【1】 全面 精简 推荐-CSDN博客
1079
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
