5.Vue学习记录（生命周期函数、组件、vue脚手架）

2022-12-5
生命周期函数：
        1.beforeCreate：在数据监测和数据代理之前进行的操作
        2.created：数据监测和数据代理完成后的操作
        3.beforeMount：在Dom元素完成挂载前
        4.mounted：在dom元素挂载完成后
        5.beforeUpdate：在数据修改之前
        6.updated：在数据修改后
        7.beforeDestroy：在vm销毁前
        8.destroyed：在vm销毁之后
常用的生命周期函数：
        1.mounted，beforeDestroy
        2.mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息【初始化操作】
        3.beforeDestroy：清楚定时器、解绑自定义事件、取消订阅消息等【收尾工作】
        4.销毁后借助Vue开发者工具看不到任何信息
        5.销毁后自定义事件会消失，但原生DOM事件依然有效
        6.一般不会在beforeDestroy操作数据，因为即使操作了数据，也不会再触发更新。
组件：
        1.组件是一块代码（js+css+html+...）的代码集合
        2.模块化，是把较大的js代码分割成多个js文件的模式
        3.组件分为两种：非单文件组件和单文件组件（较常用）
        4.组件的写法有两种：局部组件和全局组件
        5.局部组件：a构建.const 组件名=Vue.extend({}),b注册.components:{对象名（key）：组件名（value)}，c使用.<对象名></对象名>

2022-12-6
组件命名：
        1.单个单词：school或School
        2.多个单词：my-school，MySchool（需要使用脚手架），myschool
        3.可以在定义组件时增加name属性来定义配置项在开发者工具中的显示，组件简写const s={}
        4.组件标签的写法<school></school>,<school/>(自闭式写法）
组件嵌套：
        1.可以定义一个组件里面嵌套多个组件，被嵌套的组件，其注册要在要嵌套具体组件里
        2.组件本质是new出来的一个VueComponent的构造函数，是组件定义时Vue.extend创建的函数
        3.每次调用Vue.extend会新建一个新的VueComponent
        4.vue里面函数的this都是vm，组件里面的函数中的this都是vc也就是new出来的VueComponent函数对象
        5.一个重要的内置关系：VueComponent.prototype.__proto__===Vue.prototype
        6.这个关系让组件实例对象（vc）可以访问到Vue原型上的属性、方法。
单文件组件：
        1.单文件组件：组件文件（xxx.vue),总体的组件文件（app.vue)，main.js,index.html
        2.组件文件：<template></template><script></script><style></style>
        3.app.vue:<template></template><script>导入其他组件</script><style></style>
        4.main.js:创建vm，导入app.vue组件
        5.index.html:创建容器
        注：解析这些文件需要使用vue的脚手架
vue脚手架：
        1.安装vue脚手架： a.安装vue脚手架的前提是要安装nodejs，安装好后可以使用npm命令
                    b.切换镜像源：npm config set registry=https://registry.npm.taobao.org
                    c.下载vue脚手架：npm install -g @vue/cli
                    d.安装好vue脚手架，当使用vue命令后就可以看到对应的vue信息
        2.创建一个脚手架：a.在需要创建脚手架的位置打开cmd，执行vue create xxxx
                    b.创建好后，使用npm run serve启动项目

2022-12-7
        1.使用脚手架创建自己的项目注意点：error  Component name "Product" should always be multi-word出现此错误是name应保持多个单词
        2.Module not found: Error: Can't resolve 'less-loader'：是缺少组件，解决办法：npm install --save-dev less-loader less执行此命令
        原因：主要是在style标签上使用了（lang="less"）属性

render函数：
        1.vue.js与vue.runtime.xxx.js区别：vue.js是完整版js，vue.runtime.xxx.js是缺少模板解析器的版本，只有核心功能
        2.因为脚手架引入的是缺少模板解析器的vue所以需要使用render函数，接收到createElement函数
脚手架配置：
        1.使用vue inspect > output.js可以查看到vue脚手架的默认配置
        2.可以使用vue.config.js对脚手架进行配置
ref：
        1.ref被用来给元素或子组件注册引用信息（id的替代品）
        2.获取方式：this.$resfs.xxx
        3.对于html原生标签获取的是dom元素，对于组件来说获取的是实例对象