生命周期
Vue生命周期的主要阶段：4个before， 4个ed，创建，装载，更新，销毁
记得说单词：
第一次执行前4个生命周期钩子函数，
模板在mounted时渲染完毕，
父子组件的生命周期顺序（父组件前三个，子组件前四个，父组件再第四个）
// 生命周期/* */
// 初始化阶段（不常用），拿不到data中的数据
beforeCreate() {
// 创建实例前
},
created() {
// 发送ajax请求，获取数据，赋值data，渲染
},
// 挂载阶段
beforeMount() {
},
// 可以拿到dom元素，进行性dom操作
mounted() {
},
// 更新阶段 （触发它的更新，数据变化，dom元素新增或者删除）
beforeUpdate() {
},
updated() {
},
// 销毁阶段
// vue2:::
// beforeDestroy(){
// },
// destroyed(){
// }
// vue3:::
// 这两个钩子函数需要 触发页面的才可以看到执行
// 可以在这个阶段，清除定时器，或者一些全局的函数
// 想看到效果，需要销毁这个组件， 可以在父组件中销毁这个组件
beforeUnmount() {
},
unmounted() {
}computed:{} 计算属性（总价+-*/）
-
// 对data中数据处理的 （长得像方法，使用起来像属性，计算属性）处理复杂逻辑
-
计算属性在处理完第一次数据之后 会把处理好的结果缓存起来 只要依赖的数据不变 今后再使用就从缓存中进行读取
-
计算属性有缓存 而方法只要被调用那么就执行（计算属性更节省性能）
-
可读不可改，get set 可改可读
//1.只能读，不能写
computed:{
revserMsg(){
console.log('烦死了');
return this.msg.split('').reverse().join('')
}
}
//2.这样写，可读可写
get **必选**:会在计算属性再第一次被调用或者是在依赖的数据改变之后会自动执行
并且返回一个处理好的结果
set **可选**:set里面必须有一个形参 这个形参就是计算属性修改之后的值
什么时候被调用:就是再计算属性处理好的值 被修改的时候调用
computed: {
// 这样写，可读不可写
// fullName(){
// return
// }
// 这样写，可读可写
fullName:{
get(){
return this.first+this.las
},
set(val){
console.log(val);
this.first = val.split('')[0]
this.las = val.split('')[1]
}
}
}watch:{} 侦听器：监听data中的数据 当data数据改变了 他就会触发 从而执行一些逻辑
-
使用场景：数据变化时执行异步或开销比较大的操作。
-
watch不支持缓存，当对应属性发生变化的时候，响应执行。
-
使用watch来侦听data中数据的变化，watch中的属性现阶段一定是data 中已经存在的数据。
-
简写： watch:{ 你要监听的data数据(newval，oldval){ 你的逻辑 } }
1.handler方法 监听的数据改变的时候执行的回调函数
2.watch在首次加载不会触发 如果我们向触发 必须使用 immedate属性 来开启首次加载监听
3,再就是watch默认不会监听到对象的属性的改变 如果我们想监听对象的属性改变 我们可以使用deep
//监听器watch使用
<div id="app">
<!-- <input type="text" v-model="firsttext">
+
<input type="text" v-model="secondtext">
=
{{sumtext}} -->
<input type="text" v-model="user.firsttext">
+
<input type="text" v-model="user.secondtext">
=
{{user.sumtext}}
</div>
</html>
<script src="./lib/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
// firsttext:'',
// secondtext:'',
// sumtext:''
user: {
firsttext: '哈',
secondtext: '黑',
sumtext: ''
}
}
},
watch: {
// // 简单写法（侦听器：侦听属性）
// 1.
// firsttext: function (newval,oldval) {
// this.sumtext = newval + this.secondtext
// console.log(this.newval);
// },
// secondtext: function(newval,oldval){
// this.sumtext = this.firsttext + newval
// }
// 2.打点写法，层次多麻烦
// 'user.firsttext':function(newval,oldval){
// this.user.sumtext = newval + this.user.secondtext
// },
// 'user.secondtext':function(newval , oldval){
// this.user.sumtext = this.user.firsttext + newval
// }
// 复杂写法（深层侦听器：懒执行，添加立即执行即可解决）
user: {
// 开启深层监听器
deep: true,
// 强制回调函数立即执行
immediate: true,
// handler监听的数据改变的时候执行的回调函数
handler(newval,oldval){
this.user.sumtext = newval.firsttext + newval.secondtext
}
}
}
}).mount('#app')
</script>filter:{} 过滤器：处理一些数据（V3中没有，计算属性可替代）
局部过滤器：再不改变原始数据的情况下 格式化展示内容 但是仅仅只会对自己范围内数据生效
<div id="app">
<!-- {{ data数据 | 过滤器名}} -->
{{time | newTime}}<br>
<!-- {{ data数据 | 过滤器名(传递的值可以多个)}} -->
{{msg | newMsg(' --- ','爱')}}<br>
<!-- {{ data数据 | 过滤器名(传递的值可以多个) | 对前边的数据操作}} -->
{{ msg | newMsg(' --- ','爱') | newNewMsg }}
</div>
<script src="./lib/vue.js"></script>
<!-- <script src="./lib/vue.global.js"></script> -->
<script>
let app = new Vue({
data() {//数据
return {
time: 1314521,
msg: 'hello world'
}
},
methods: {//方法
},
computed: {//计算属性
},
watch: {//侦听器
},
filters: {//过滤器
newTime(val) {// 传进的前一个值。默认值val
// 将时间戳转换成日期对象,转换成日期对象
return new Date(val).toLocaleString()
},
// newMsg(){
// return '哈哈哈哈哈'
// }，
newMsg(val) {
return val.split('').reverse().join('')
},
newMsg(val,x,y) {//val是默认的，是你处理的元素，x是reverseMsg的参数...val后可传递多个
return val.split('').reverse().join(x)+y
},
newNewMsg(){
return '哈哈哈哈哈'
}
},
compontent: {//全局组件
compontents: {//局部组件：带s
}
}
})
app.$mount("#app")
</script>全局过滤器：再不改变原始数据的情况下 格式化展示内容 会对当前项目下所有位置数据生效
// 全局过滤器filter
// Vue.filter("过滤器的名字",(你要过滤器的数据)=>{
// return 你的逻辑
// })
Vue.filter("xiaoming",(val)=>{
if(val.length>3){
return val.substr(0,3)+"..."
}else{
return val
}
})v-for和虚拟dom和diff算法
-
v-for的默认行为会尝试原地修改元素而不是重新创建（就地更新）-
如何操作dom：循环出新的虚拟DOM结构, 和旧的虚拟DOM结构对比, 尝试复用标签就地更新内容
-
-
虚拟dom
-
实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上
-
优点：提高DOM更新的性能, 不频繁操作真实DOM, 在内存中找到变化部分, 再更新真实DOM(打补丁)
DOM是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的 真实的DOM节点，哪怕一个最简单的div也包含着很多属性
操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户的体验，所以使用虚拟dom
-
实现思路： Vue中所有对象的 context(属性的意思) 选项都指向了 Vue 实例 所以Vue中，#app模板内的标签, 都要被vue处理成虚拟DOM对象, 才会渲染显示到真实DOM页面上
-
-
diff算法
-
diff算法如何比较新旧虚拟DOM? ：
-
-
同级比较
-
根元素变了：删除重建 DOM树
-
根元素没变, 属性改变： DOM复用, 只更新属性
-
v-for有没有 :key=" "
-
虚拟DOM的唯一标识
-
没有key，v-for会最大限度的就地更新，复用相同类型元素文章来源：https://www.toymoban.com/news/detail-441204.html
-
有key属性, diff算法会根据你的key值进行比较：相当于直接插入，提高了更新效率文章来源地址https://www.toymoban.com/news/detail-441204.html
-
-
到了这里，关于vue-3：生命周期，computed，watch，filter，虚拟dom和diff算法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
