myVue3

最新推荐文章于 2024-04-08 09:25:22 发布

silence^

最新推荐文章于 2024-04-08 09:25:22 发布

阅读量88

点赞数

文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/lyclyc_/article/details/120314431

版权

本文详细阐述了Vue3中组件的生命周期，包括父组件和子组件从创建到销毁的各个阶段。同时，讨论了Vue的基本指令如v-if、v-show、v-for等，以及路由传参和首屏优化策略，如CDN、懒加载和数据缓存。还介绍了数组操作方法如splice和slice的使用区别，以及如何处理未知宽度的元素居中。最后，提到了Vue的响应式原理和项目中遇到的浏览器兼容性问题，特别是Promise和箭头函数在IE上的解决方案。

摘要由CSDN通过智能技术生成

vue生命周期执行中子组件的生命周期：
父组件 beforeCreate 父组件创建前
父组件 created 父组件创建后
父组件 beforeMount 父组件挂载前
子组建 beforeCreate 子组件创建前
子组建 created 子组件创建后
子组建 beforeMount 子组件挂载前
子组建 mounted 子组件挂载后
父组件 mounted 父组件挂载后
父组件 beforeUpdate 父组件更新前
子组建 beforeUpdate 子组件更新前
子组建 updated 子组件更新后
父组件 updated 父组件更新后
父组件 beforeDestroy 父组件销毁前
子组建 beforeDestroy 子组件销毁前
子组建 destroyed 子组件销毁后
父组件 destroyed 父组件销毁后

promise和async await返回值----未解决
https://www.cnblogs.com/jiangweichen88/p/13528218.html

数组的push，pop shift unshift方法

push()方法可以在数组的末属添加一个或多个元素
pop()方法把数组中的最后一个元素删除
unshift()方法可以在数组的前端添加一个或多个元素
shift()方法把数组中的第一个元素删除

vue常用基本指令：
v-if：根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建。
v-show：根据表达式之真假值，切换元素的display CSS 属性。
v-for：循环指令，基于一个数组或对象渲染一个列表，Vue 2.0 以上必须需配合key值使用。
v-bind：动态地绑定一个或多个特性，或一个组件prop到表达式。
v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
v-model：实现表单输入和应用状态之间的双向绑定。
v-once：只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

vue路由传参的方式：--------未解决

vue单页面常见的首屏优化：https://www.cnblogs.com/ivan5277/p/12981018.html
1，使用CDN资源，减少服务器带宽压力
2，路由懒加载
3，按需加载第三方资源，如vant,按需引入vant中的组件
4，app在启动页时预先加载首屏
5，利用localStorage缓存首屏数据，每次进入首页优先读取缓存数据，请求首屏接口后返回的数据再更新到缓存里
6，图片也使用懒加载显示
7，首页引入的自定义组件合并成一个分组返回，减少js请求

让多个div上中下居中，横排，间隔一致
用弹性布局display:flex

<style>
       .wrap{
           display: flex;
           width: 1000px;
           height: 800px;
           border: 1px solid red;
           display: flex;
           justify-content: space-around;
           align-items: center;
           flex-direction: column;
       }
       .wrap div{
           width: 100px;
           height: 100px;
           background: gold;
       }
    </style>

<div class="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

splice和slice https://www.jianshu.com/p/9eadb164714a
splice能够实现对数组元素的删除、插入、替换操作，返回值为被操作的值,*这个方法会改变原数组
slice 能够截取字符串或数组，并返回一个新的字符串或数组（不改变原字符串或数组）

let str = 'hello world'
// 截取下标 [2,5) 区间的字符串，左闭右开，结果为：llo
let str2 = str.slice(2,5)

slice 是一个专门用于数组操作的方法，堪称最强大的数组操作方法。它可以对数组中的元素进行删除、插入和替换。替换原数组，返回删除的元素数组.在原数组操作，也就是说改变原数组

split以基于指定的分隔符将一个字符串分割成多个子字符串，并将结果放在一个数组中.

let str = 'this is a test'
str.split('s')

上面代码的运行结果为，字符串以 ‘s’ 进行分割，被分割的字符串返回成一个数组： [“thi”, " i", " a te", “t”]。

关于数组中是否改变原数组的方法总结 https://blog.csdn.net/weixin_41849462/article/details/82892286

不知道宽度的垂直水平居中：
一，弹性布局-------这些都是在父级上面写的

display:flex
align-items:center
justify-content:center

第二种：
position:absolute
top: 50%
left: 50%
transform:translate(-50%,-50%)
http请求流程：建立TCP连接----发送请求行-----发送请求头----服务器返回状态行-----返回响应头----发送数据------断开TCP连接‘

vue响应式原理
vue响应式就是双向数据绑定—v-model
Vue数据双向绑定是通过采用数据劫持结合发布者-订阅者模式的方式来实现的。通过Object.defineProperty()来劫持各个属性的setter，getter。修改触发set方法赋值，获取触发get方法取值，在数据变动时发布消息给订阅者，触发相应的回调并通过数据劫持发布信息。

vue项目开发过程中遇到的兼容性问题：
二、IE家族不支持Promise对象
解决方案：
安装： cnpm install es6-promise
在 main.js 引入： polyfill require(“es6-promise”).polyfill();

三、IE不支持箭头函数，
解决方案：
①可以安装插件，
②不使用箭头函数，直接用function函数，只需var that = this来指代this

vue项目性能优化：------