vue实战问题1：vue组件beforeUpdate和updated生命周期钩子不执行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue实战问题1：vue组件beforeUpdate和updated生命周期钩子不执行相关的知识，希望对你有一定的参考价值。
参考技术A 前段时间遇到的一个问题，项目是由支付宝小程序移植过来的vue项目，将didUpdate更换成了updated，跑起来后发现updated生命周期钩子没有执行。组件通信使用的就是普通的父子组件的传值，当时以为是父组件上的数据没有更新，所以导致updated没有执行，不过后来发现父组件的值改变了，但是updated没有执行。找了下官方文档，发现文档中提到了这个坑。
updated可能并不会执行，最好的还是使用计算属性或者用watch监听数据变化
以为差不多这样就可以了，后来随着测试的加深，一般监听时是不能监听到对象属性值的变化的，发现如果监听的是Object类型的复杂数据类型的话，这样写是无法监听key和value的变化的，需要对Object类型进行深层监听
这样的话，基本上就解决了vue组件beforeUpdate和updated生命周期钩子不执行的问题
Vue 开发实战基础篇 # 3：Vue组件的核心概念：事件
说明
【Vue 开发实战】学习笔记。
事件
vue 提供了一个简单的方式进行绑定事件，就是使用 @xxx 就可以进行事件绑定，这里以 click 事件为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件的核心概念：事件</title>
</head>
<body>
<div id="app">
message
<ul>
<todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item>
</ul>
<todo-list></todo-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 定义一个名为 todo-item 的组件；名字需要唯一
Vue.component("todo-item",
props:
title: String,
del:
type: Boolean,
default: false
,
template: `
<li>
<span v-if="!del">title</span>
<span v-else style="text-decoration: line-through;">title</span>
<button v-show="del" @click="handleClick">删除</button>
</li>
`,
// data 需要为函数返回一个对象，保证唯一性
data: function()
return
,
methods:
handleClick()
console.log('点击了删除按钮');
// 发射时间出去
this.$emit("delete", this.title);
,
);
// 定义一个名为 todo-list 的组件
Vue.component("todo-list",
template: `
<ul>
<todo-item v-for="item in list" :title="item.title" :del="item.del" @delete="handleDelete"></todo-item>
</ul>
`,
data: function()
return
list: [
title: "课程3",
del: true
,
title: "课程4",
del: false
,
]
,
methods:
handleDelete(val)
console.log('handleDelete---->', val);
);
var vm = new Vue(
el: "#app",
data:
message: "kaimo 313",
list: [
title: "课程1",
del: true
,
title: "课程2",
del: false
,
]
)
</script>
</body>
</html>
然后点击删除按钮，结果如下
以上是关于vue实战问题1：vue组件beforeUpdate和updated生命周期钩子不执行的主要内容，如果未能解决你的问题，请参考以下文章