03第2章第一个Vue.js应用（4-6节）.pptxVIP

《Vue应用程序开发》 第2章 ：第一个Vue.js应用目录01CONTENTS2.5生命周期2.1Vue.js的使用Part 1Part 5022.6章节案例2.2实例及选项Part 6Part 2032.3数据绑定Part 302.4计算属性Part 40052.4计算属性计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。模板内的表达式常用于简单的运算，当逻辑过于复杂时，通常使用计算属性。举例：2.4计算属性举例说明计算属性和methods的区别：methods方法和computed计算属性，两种方式的最终结果是完全相同计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。methods方法，每当触发重新渲染时，调用方法将总会再次执行函数。2.5生命周期任何事物从产生到消亡都有自己的生命周期。Vue实例创建后，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子。我们可以利用这些钩子，在合适的时机执行我们的业务逻辑，以满足功能需求。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。2.5生命周期Vue.js的生命周期对应的方法方法名含义beforeCreate在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。created在实例创建完成后被立即调用，此时已完成数据绑定和事件配置，但尚未生成DOM。beforeMount在挂载开始之前被调用，且在服务器端渲染期间不能被调用。mounted在挂载之后被调用，且在服务器端渲染期间不能被调用。beforeUpdate当数据发生变化时调用，此时DOM结构尚未完成更新，且在服务器端渲染期间不能被调用。updated实例和DOM结构完成更新后被调用，在服务器端渲染期间不能被调用。activated实例被激活时调用，用于重复激活一次实例，需要配合keep-alive属性使用。在服务器端渲染期间不能被调用。deactivated实例被移除时调用，需要配合keep-alive属性使用。在服务器端渲染期间不能被调用。beforeDestroy在Vue 实例销毁之前调用，此时实例仍然可用。在服务器端渲染期间不能被调用。destroyed在Vue 实例销毁之后调用，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。在服务器端渲染期间不能被调用。errorCapturedVue.js2.5.0版本新增，当捕获一个来自子孙组件的错误时被调用。2.6【章节案例】：简单的计时器2.6.1案例描述页面计时器从0开始，单击“开始计时”按钮，开始按秒计时。单击“暂停计时”按钮，计时会被暂停，当再次单击“开始计时按钮”，会继续计时。2.6.2案例设计使用插值法插入Vue示例的数据给按钮添加单击事件在方法属性中，定义2个方法使用定时器感谢 聆听 THANK YOU FOR LISTENING