[JavaScript知识库]复习知识点

复习

12.3-数组、object、Vue

    <script>
        // Array
            // Array.from()
            //Array.isArray()
            //ES5:arr.push/pop/shift/unshift/indexOf/lastIndexOf/splice/slice/join/toString/reverse
                //sort/concat/map/forEach/filter/reduce/reduceRight/some/every
            //ES6:arr.includes/find/findIndex/flat/fill/keys/values/entries
        //Object
            //Object.prototype方法：obj.valueOf/toString()/hasOwnProperty/isPrototypeOf/propertyIsEnumerable
            //Object方法：
                //Object.assign/is/create
                //Object.defineProperty(obj,key,[descriptor])-》configrable、writable、enumerale、set、get
                //Object.getOwnPropertyDescriptor/getOwnPropertyDescriptors
                    //getOwnProeprtyNames/getOwnPropertySymbols/getKeys/getValues/Reflect.ownKeys
                //冻结：freeze/isFrezon
                //封存：seal/isSealed
                //阻止扩展：preventExtensions/isExtensable
                //获取原型：getPrototypeOf/setPrototypeOf
                //与二维数组之间转换：entries/FromEntries()
        //VUE  指令
            //普通指令：v-text/v-html/v-show/v-if/v-else-if/v-else/v-for/v-bind/v-on/v-model
            //优化指令：v-pre/v-once/v-cloak
        //Vue  修饰符
            //v-bind->简写：冒号
                //:attr.prop/:attr.camel/attr.sync
            //v-on->简写：@
                //通用：@event.stop/.prevent/.capur/.self/.once/.exact
                //鼠标专用：.left/.right/.middle
                //键盘专用：.enter/del/esc/tab/shift/ctrl/alt/space/up/down/left/right
                //自定义修饰符：Vue.config.keyCodes.a=65
                //组合按键：@event.ctrl.a.exact，exact是精准匹配
       
                let vm=new Vue({
                 //Vue 生命周期函数（钩子函数）：init/mount/update/destory
                    beforeCreate(){},//初始化之前，只是一个vm空对象，没有任何数据
                    created(){},//初始化之后，已经生成了data和methods，el也生成了，但是由于需要绑定DOM对象，所以还没赋值
                    beforeMount(){},//模板编译之前，页面加载除了还没化妆的效果，页面上显示的是{{name}}原始效果
                    mounted(){},//模板编译之后，页面化完妆了，{{name}}-><div>sjh</div>
                    //响应式数据修改后触发update
                    beforeUpdate(){},//这时vm对象中的数据已经修改了内容，但页面还没来得及修改
                    upadted(){},//这时页面完成重新渲染了，新数据也挂载上去了
                    //调用了vm.$destory时触发
                    beforeDestory(){},//vm与绑定的页面联系还没中断，联系正常
                    detoried(){},//（vm与视图双向解绑）vm与绑定页面的联系全部销毁：所有指令解绑，所有事件、函数删除，所有子实例销毁
                    activated(){},
                    deactivated(){},
                    errorCaptur(){},
                //过滤器 filter:只能在{{}}和v-bind中使用
                        //定义全局过滤器：Vue.filter("addTwo",function(val){return "2"+val}),可供所有视图使用，用法与局部过滤器想用
                         filters:{
                             addZero(val){return "0"+val},//定义函数私有过滤器，在视图中<div>{{num|addZero}}</div>使用
                             addOne(val){return "1"+val}//可以组合使用，在视图中<div>{{num|addZero|addOne}}</div>使用
                         },
                //computed/methods/watch三者的区别？
                         //computed是属性调用，methods是函数调用
                         //computed有缓存机制，methods和watch没有
                         //computed和watch能监控对象，methods不能
                         //watch能监控路由，methods和watch不能
                    //computed:计算属性（多个变量值绑定到一个结果值）
                         //调用方式：(sum是data中不存在的属性)，与data中所有数据对象的调用方式相同，把sum看做一个属性：{{sum}}
                         computed:{
                             //函数式定义方式：默认调用sum的get()方法，原理是：Object.defineProperty(vm,"sum",[destory]){}中的get()方法
                             sum(){
                                 return this.num1+this.num2;
                             },
                             //对象式定义方式：每个计算属性存在get()和set方法
                             sum:{
                                 //直接函数式定义就是调用的get方法
                                 get(){return this.num1+this.num2},
                                 //这是watch实现的原理(可实现一个值改变，影响多个结果值改变)
                                 set(val){
                                     let arr=val.split("-");
                                     this.num1=arr[0];
                                     this.num2=arr[1];
                                 }
                             }
                         },
                    //watch:侦听属性（一个值变化，影响多个值变化）
                         //sum需要是vm中存在的属性才能进行监听
                         //如果没有用到监控路由，我们一般用computed的set()放法替代watch，以为computed有缓存
                        watch:{
                            sum(newval,oldval){//newval是新获取到的值，oldval是之前的值
                                let arr=newval.split("-");
                                     this.num1=arr[0];
                                     this.num2=arr[1];
                            }
                        },
                    //methods:函数定义，与原生JS定义函数一样
                        //调用方式：<div @click="handel(ev)或handel或handel(a,b,$event)"></div>
                        handel(a,b,ev){
                            //逻辑代码
                        }
                } 
                )


        let obj={};
        
    </script>

12.9-vue组件化

        / 局部组件：想要调用需要导入并注册的组件
            //import test from  "Test";
            // components:["test"]
            //<test></test>
        全局组件：在main.js中将组件注册到全局，想用直接调用，无需导入注册
            //import test from  "Test";
            //Vue.component("test",Test)
            //其他组件：<test></test>
        
        插槽slot的作用；保证插件的复用性和可扩展性
        //分类：默认插槽、具名插槽、作用域插槽
            //默认插槽：直接在调用组件的标签中间写你想插入的代码，这些代码会自动插入到组件<slot></slot>中，因为这个插槽没有name,所以name默认为default
            //具名插槽：具名插槽在标签中定义，需要用template标签包起来，template标签用v-slot:xxx命令定义插槽名，则这个template标签中的代码，会自动插入到组件name="xxx"的插槽中，这叫具名插槽
            //作用域插槽：作用域插槽是子组件给父组件传送私有数据的一种方式，子组件中通过在<slot></slot>标签中用v-bind或冒号绑定数据，而父组件就可以通过v-slot:xxx="slotProps"的方式获取对应插槽传来的所有数据
        虚拟DOM：_vnode,表示非真实的DOM
            //Vue内部自己定义的一套对象，基于自己规定的键值对，来描述每一个节点特征
                //tag标签名、text文本内容、children子节点、data属性
            虚拟dom工作过程：
                //一、基于vue-template-complier（vue模板渲染）去渲染解析视图，最后构建出上述的虚拟DOM
                //二、组件重新渲染，又重新生成一个_vnode
                //三、新的_vnode与旧的_vnode去做比较，获取到差异部分
                //四、_vnode再将差异部分渲染成真实的DOM元素
            状态值和属性值：
                //状态值：由于vue组件中的数据大多是响应式数据，他们的改变都会触发组件重新渲染，所以称为状态值
                //属性值：属性值表示的是调用组件时，在组件标签中定义的属性，比如title="aaa"/:num="10"这都称得上是属性值 
                    //子组件可以通过props获取父组件在调用时定义的title和num，props可以是数组类型，也可以是对象类型，对象类型接收值，可以对值做校验
                    // type:数据类型    require：是否必须传   default：默认值
                //状态值、属性值、methods、watch、computed这些数据都是直接挂载到了Vm实例上的，所以他们不能重名，否则会报错
            组件库有哪些：
                //element-ui/antdv(蚂蚁金服)/iview(京东)
                // 如何使用：
                //安装：npm install element-ui
                //在main.js中导入需要的功能组件
                //调用
            样式私有化：
                //样式私有化就是在style标签中添加一个scoped属性，那么这个组件在标签上就会添加一个id，这个id会将组件中所有的标签上都添加一个这个id值的属性，并且在样式选择器中通过属性选择器来精确定位，但是添加后，所有属性的渲染存在一个问题：
                    //只有我们自己写的标签div...或组件test...中会添加样式，但对于组件内部的标签，并不会自动添加这个属性，我们想基于当前组件，修改子组件中的标签样式，由于样式选择器中自动添加了属性选择器，所以会导致找不到指定标签，无法成功修改样式，这时需要在样式选择器前加一个/deep/,例子：/deep/.el-textarea__inner
            //API:我们会把axios二次封装或者是各种API接口放到src/api目录下，我们可以把这些API挂载到Vue的原型上，后续各个组件基于this.$api.xxx()即可调用接口

        组件之间传参
        //七种：
            //父传子:
            //子传父
            //兄弟传兄弟
            //祖先传子孙
            //实例公有属性传参
            //vuex
            //localeStorage/sessionStorage
            //父传子：父组件基于调用组件的标签上给子组件标签定义属性及属性值，子组件可以通过props获取父组件传来的属性
            //子传父：基于发布订阅机制
                //父：父组件给子组件标签自定义一个事件，并且绑定上父组件的函数:(@myEvent=fn)
                //子：子组件就能够通过公有方法$emit("myEvent",params1,params2)的形式，来触发事件池中的函数，而且第二个及以后的参数，都是向这个函数传的值，这样父组件就能够接受到子组件传来的值了
            //兄弟传兄弟：基于发布订阅机制(事件公交)
                //第一步：在全局Vue公有下创建一个公有Vue实例EventBus，并且挂载到Vue的prototype上，这样所有的Vue的实例，都可以沿着原型链找到$bus
                    //let EventBus=new Vue();
                    //Vue.prototype.$bus=EventBus();
                //第二步：组件A和B，A组件通过$on方法给$bus的事件池中添加一个事件，并且绑定自己的函数:this.$bus.$on("myEvent",fn);
                    //B组件能够通过调用$emit的形式去执行$bus中的事件函数，并且传参:this.$bus.$emit("myEvent",params1,params2)
                    //当B调用时，就会执行A组件中myEvent绑定的方法，并且接收到param1和param2
            //实例公有属性：
                //this.$parent:获取父元素vm组件的属性和方法
                //this.children[n]:获取第n个子组件的实例或方法
                //this.refs.xxx:获取子组件refs值是xxx的实例属性和方法
                //this.$root:获取根组件的vm实例，一般是main.js下的vue实例
        //  在组件中创建的原生事件，无法触发，需要在时间后加.native属性，使子组变成一个html标签，再执行
      组件生命周期
            //父组件创建的生命周期函数执行过程：
                //父beforCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
            //子组件更新渲染：
                //父beforeUpdate->子beforeUpdate->子updated->父updated
            //父组件更新渲染：
                //父beforeUpdate->父updated
                //注意：虽然默认情况下父组件的更新不会触发子组件的更新，但是如果子组件中调用了父组件中的数据或方法，如果调用的数据被修改触发了更新，那么相应的子组件也会跟着触发更新
            //父组件销毁：
                //父beforeDestory->子beforeDestory->子destoryed->父destoryed
            //子组件销毁：
                //父beforeUpdate->子beoreDestory->子destoryed->父updated