当前动态:vue08----（）

(资料图片)

昨日回顾

# 1 props-不需要在data中定义了，他就在当前组件对象身上了 this     -props:[]    -props:{name:String}    -props:{name:{require:,default:...}}# 2 组件间通信-1 父子：父传子 ，自定义属性    -2 子传父，自定义事件    -3 ref属性    -4 localStorage,....    -5 vuex         # 2 minx 混入-抽取代码    # 3 插件--》使用第三方插件(vue-router,vuex,elementui)-导入    -Vue.use(elementui)----> install(){}        -自定义插件：    -xx.js 中  export default{            install(vue){                1 自定义指令                2 往vue中放全局  Vue.prototype.$axios=axios                3 执行minxin                4 全局组件            }        }    # 4 vuex：状态管理器，集中式状态管理，存放变量-三个状态：    state：真正存数据的        mutations：修改state的地址 state.变量名，修改即可        actions：判断，跟后端交互，调用mutations的地方  context.commit            -在组件中使用    -模板中：  {{$store.state.变量名}}        -js中：        -直接用：this.$store.state.变量名            -调用mutations：this.$store.commit("mutations")            -正常套路：触发actions，this.$store.dispatch()        # 5 vueRouter:完成单页面应用路由跳转的效果-1 基本使用，router/index.js---->routes,加对象 {}，加入路径后，访问这个路径就显示指定的组件    -2 跳转到不同的页面    -js控制：this.$router.push("路径") ，可以写个对象         -标签控制：router-link to属性=路径，也可以写个对象                    -3 跳转到别的页面传参数    -?name=lqz&age=19       取：this.$route.query.name    -/books/1/              index.js 中配置路由，取：this.$route.params.id        -4 路由守卫    -全局路由守卫        -前置守卫：            -后置守卫        -前置守卫            router.beforeEach((to, from, next) => {                // 1 取出cookie中token                //2 判断如果不是login页面，from对象，就是路由对象，判断一下，如果是，next()                // 3 如果不是，判断token的值是否为空，如果为空，弹窗，跳转到login                // router.push({name: "login", params: {id: 99}})                // router.push("/login/88")                next({name:"login",params:{id:33}})            })                                        - localStorage，sessionStorage，cookie    -cookie：借助于第三方  vue-cookies    

今日内容

1 vue3 介绍

# 1 vue项目的版本，新项目使用vue3，有部分老项目使用vue2# vue3 的变化    1.性能的提升    -打包大小减少41%    -初次渲染快55%, 更新渲染快133%    -内存减少54%    2.源码的升级    使用Proxy代替defineProperty实现响应式    重写虚拟DOM的实现和Tree-Shaking    3.拥抱TypeScript    Vue3可以更好的支持TypeScript    4.新的特性    Composition API（组合API）        setup配置        ref与reactive        watch与watchEffect        provide与inject        新的内置组件        Fragment        Teleport        Suspense        其他改变        新的生命周期钩子        data 选项应始终被声明为一个函数        移除keyCode支持作为 v-on 的修饰符-------------------------------- # 组合式API和配置项APIvue2 ：配置项API         new Vue({             el:"#app",             data:{}         })vue3: 组合式API        let name="lqz"        let add=()=>{        }

.....

2 vue3 创建项目

2.1 使用vue-cli构建工具 创建vue3项目

# 创建跟之前vue2 一样，只是选择vue版本的时候，选择vue3# 创建完成，使用pycharm打开，并运行

..

2.2 vite构建工具 创建vue3项目

vite官网    https://vitejs.cn/vite构建工具不仅仅可以创建vue项目，也可以创建别的项目！！！构建工具的作用就是帮我们创建出底层代码来，帮我们把xx.vue文件编译成浏览器能识别html等文件# 新建的前端构建工具，最大的优势就是速度快https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding--------------------------------------------------------------------------------------# 使用步骤：# 切换到D盘根目录输入命令-1  安装 ：npm init vue@latest# 第一次输入该命令既包含帮我们下载vite工具，也包含创建vue3项目# 再用vite工具创建vue3项目的时候，就直接开始创项目了，输入项目名# 就一个Vue Router 选项选选yes  其他都选no-2  cd到项目中执行cnpm install 把依赖装好-3  运行：npm run dev----------------------------------------------------------------------------------------------------补充：    -vueRouter：跟之前一样    -Pinia：用来替换Vuex的，新一代的状态管理器# 为什么这么快-创建项目快----》不安装第三方依赖    -执行项目，热更新----》按需编译

.....

3 setup函数

# 把项目做成最简洁的# vue2的创建vue实例和vue3创建vue实例的区别-new Vew()---->是Vue的实例，里面有$store,$refs...    -createApp(App)--->是个对象，对象里有东西，没有$store,$refs...，以后有用，都是导入使用    # 以后vue3 的