Vue2和Vue3基础总结

       /*

            git config --global user.name

            git config -l

            git log

            git init

            git status

            git commit -m 'xxx'

            git add remote origin xxx

            git push -u origin master

           

            git branch

            git branch xxx

            git checkout xxx

            git checkout -b xxx

            git branch -d xxx

            git merge xxx

            git clone

            git pull -u origin master

            const path = require('path')

            module.exports = {

                mode: 'development',

                enrty: path.join(__dirname, 'src'),

                output: {

                    path: path.join(__dirname, 'dist'),

                    fileName: 'bundle.js'

                },

                devServer: {

                    open: true,

                    host: 127.0.0.1,

                    port: 8080

                },

                plugins: ['xxx'],

                module: {

                    rules: [

                        {

                            test: /\.less$/,

                            use: ['style-loader', 'css-loader', 'less-loader']

                        },

                        {

                            test: /\.js$/,

                            use: 'babel-loader',

                            exclude: 'node_modules'

                        }

                    ]

                },

                devtool: 'source-map',

                resolve: {

                    alias: {

                        @: path.join(__dirname, 'src')

                    }

                }

            }

            "scripts": {

                "serve": "webpack serve",

                "build": "webpack --production"

            }

            vue2:

                Object.defineProperty实现响应式：

                    缺点：

                        对象类型：对后续追加的属性或者删除属性不会是响应式的，需要通过 Vue.set() Vue.delete()方法实现删除或者追加

                        数组类型：通过索引号直接修改元素不会是响应式的，通过Vue.set()实现响应式或者通过变更方法 push pop shit unshift filter...

                数据的渲染语法(Mustache语法)：{{ data }}        

                常用指令：

                    内容渲染：v-html v-text

                    属性绑定：v-bind: 简写 (:)

                    事件绑定：v-on: 简写 (@)

                        事件修饰符：.stop阻止事件冒泡 .once该事件只会触发一次 .prevent阻止默认行为

                    条件渲染：

                        v-if

                        v-show

                        区别: v-if的隐藏是直接操作DOM删除掉该元素，不会在页面中存在, v-show是通过样式的display进行显示与隐藏

                              v-show适用于频繁的多次操作，而v-if因为是直接操作DOM元素，性能开销比较大

                    循环渲染：v-for

                             key值的绑定：

                                1.帮助虚拟DOM更好的进行对比

                                2.在对列表元素进行逆序操作的时候，不会引起错误

                                3.最好是唯一的标识

                    双向数据绑定：v-modle 视图的变化会同步到数据(modle)中，而数据的变化也会同步到视图中(view)

                常用的配置项：

                    data: 模板中用到的都是基于该对象中的数据

                    computed: 常用于在模板中展示数据

                        1.当所依赖的数据发生了变化后，会立即执行里面的函数，返回的就是计算后结果，在模板中当属性使用即可

                        2.缓存：如果当前数据没有发生变化，那么就会取上一次的结果

                        3.执行：定义的时候执行一次，所依赖的数据发生变化之后执行

                    watch: 常用于在数据发生变化后，进行二次的加工处理或者处理一些业务逻辑

                        1.监听data对象中的数据，以函数的形式进行处理，当数据发生了变化之后，可以做一些加工处理

                        2.以对象方式进行定义时,有两个配置项：immediate：true(加载后立即执行一次) deep: true(深层次的侦听)

                        3.执行：数据发生变化后执行

                    filters: 常用于格式化数据

                        1.以函数的形式定义，接收当前绑定的元素的内容和当前元素的具体属性信息

                        2.使用的时候通过 原数据 | 过滤器名称；

                        3.函数返回的结果就是模板中最终呈现的数据

                    methods: 定义DOM事件的处理函数

                生命周期函数：

                    组件创建之前：beforeCreate

                    组件创建完毕：created * 发请求 loading加载效果

                    组件挂载前：beforeMount

                    组件挂载完毕：mounted * 发请求 最早能够获取DOM元素 监听兄弟组件的自定义事件

                    组件数据更新前：beforeUpdate

                    组件数据更新完毕：updated

                    组件销毁前：beforeDestroy * 销毁一些定时器 事件处理函数

                    组件销毁完毕：destroyed

                    缓存组件激活时 deactive

                    缓存组件失效时 actived

                组件传值：

                    父子：自定义属性传递，prosp接收

                    子父：$emit('xxx', data) @xxx="handler()"

                    兄弟：bus.$emit('xxx', data) bus.$on('xxx' () => {})

                动态组件：<component is="Home"></component>

                         展示is对应名称的组件在页面中

                缓存组件：<keep-alive include="xxx"></keep-alive>

                         include对应的组件会被缓存，不会被销毁，组件内的数据和状态不会消失

                $nextTick： 下次循环更新之后，执行回调，数据更新完毕后立即执行

                          确保DOM元素已经渲染到页面上后

                mixin：混入配置项，如果配置项相同，组件内的优先级更高

                插槽: 组件中预先留了一个位置，允许用户自定义组件内的结构

                      Home组件内，在特定的位置写了一个 <slot>默认内容</slot>

                      <Home>

                        <div>用户自定义的内容结构</div>

                      </Home>

                      具名插槽：name="xxx"

                      作用域插槽：msg="xxx", 组件中的数据通过作用域插槽的形式传递给了使用者，使用者决定该数据要如何渲染

                        使用者通过 <template v-slot:xxx="scope"></template>

                自定义指令 Vue.direactive('xxx', (el, bind) => {})

                     

                路由解决方案：Vue-router

                    new VueRouter({

                        routes: [

                            {

                                path: '/'

                                redirect: '/home',

                            },

                            {

                                path: '/home/:id?',

                                component: () => import('xxx'),

                                beforeEnter(to, from, next),

                                meta: { x: 1 },

                                chidren: [

                                    {

                                        path: 'user',

                                        component: () => import('xxx')

                                    }

                                ]

                            }

                        ]

                    })

                    声明式导航: <router-link to="/xxx"></router-link>

                    编程式导航: this.$router.push({ name: '', params: {}, query: {} }) this.$router.replace() back() go() forward()

                    全局导航守卫：只要路由跳转就会触发

                        路由跳转之前 beforeEach()

                        路由跳转之后 afterEach()

                    组件内路由导航守卫：通过路由的方式进入该组件触发

                        路由跳转之前 beforeRouteEnter()

                        路由跳转之后 afterRouteLeave()

                   

                全局状态管理：Vuex

                    new Vuex.Store({

                        state: {},

                        mutations: {},

                        actions: {},

                        getters: {},

                        modules: {}

                    })

                    两种方式访问或者调用

                        1.借助mapState函数

                        2.通过实例上$store

                    注意: 只有mutations有能力修改state中的数据

                          如果使用了modules配置，那么就的写命名空间 namespace方便区分模块

            vue3: ref使用Object.defineProperty, 还是有缺点；reactive使用了 Proxy完美解决vue2中的缺点，因为能够捕获到修改和删除

                setup(props, context)

                    props存储组件中的数据 attrs slots

                    context上下文对象，里面可以调用emit方法

                    数据必须返回出去模板才能使用

                emits: ['xxx'] 自定义事件必须在这里声明

                ref: 接收基本数据类型

                    定义响应式数据，生成一个refimpl响应式对象

                    获取数据需要.value

                reactive：接收复杂数据类型

                    定义响应式数据，生成一个proxy响应式对象

                toRef

                    类似于指针，传入一个对象和属性名，返回的结果 指向其引用地址，保存了响应式

                toRefs

                    同上，但是可以指向对象中的多个属性，保持响应式

                toRaw

                    响应式数据丢失响应式

                markRaw

                    标记一个对象，不能够被添加响应式

                readonly

                    只读的数据，不能被修改

                shallowReadonly

                    浅层次的只读数据，更深层次的数据还是能够被修改

                shallowRef

                    浅层次的响应数据

                shallowReactive

                    浅层次的响应式数据

                customRef

                    自定义refimp对象

                    customRef((track, trigger) => {

                        return {

                            get() {},

                            set() {}

                        }

                    })

                computed

                    const res = comouted(() => {})

                watch

                    watch(name, (oldValue, newValue) => {})

                    watch([name, age], (oldValue, newValue) => {})

                    watch(obj, () => {}, { immediate: true, deep: true })

                    watch(() => obj.name, (oldValue, newValue) => {})

                    watch([() => obj.name, () => obj.age], (oldValue, newValue) => {})

                watchEffect

                    watchEffect(() => {

                        用到的数据都会被侦听

                    })

                hook

                生命周期组合式函数

                    onBeforeCreate

                    onCreated

                    onBeforeMount

                    onMount

                    onBeforeUpdate

                    onUpdated

                    onBeforeUnmount

                    onUnmountd

                祖孙通信

                    provie('xxx', data)

                    inject('xxx')

        */