备忘录

作者: 唯轩_443e | 来源:发表于2017-12-30 20:59 被阅读0次

设计模式 | 备忘录模式及典型应用
Android设计模式之（12）----备忘录模式
别说你懂思维导图20190506
2018-06-16
备忘录模式
备忘录模式（Memento Pattern）
第5章 -行为型模式-备忘录模式
设计模式之备忘录模式（Memento模式）
2018.12.6
Memento Pattern（备忘录模式）

页面自己调用自己时的方法

watch: {
  $route(val) {
    if (val.query.bookid) {
       this.init() // 自己调用自己，重新初始化
       this.$refs.scroll.scrollTo(0, 0, 0)
    }
  }
},

 // 离开路由钩子
    beforeRouteLeave(to, from, next) {
      // 在这里可以询问用户是否离开当前页面 是就 next()

      next() // 调用next() 路由就会跳转
    },
    // 重复调用组件的钩子
    beforeRouteUpdate(to, from, next) {
      next()
    },

mounted() 钩子执行的内容依赖 computed计算属性时延迟20ms执行

setTimeout(() => {
  // 内容...
}, 20)

vue 生命周期

1、beforeCreate
在实例初始化之后，数据观测和event/watcher时间配置之前被调用

2. created
实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
(不需要set 的属性可在这里定义)

3、beforeMount
在挂载开始之前被调用：相关的render函数首次被调用。
该钩子在服务器端渲染期间不被调用。

4、mounted
可以使用ref定义的钩子
该钩子在服务端渲染期间不被调用。
(用于请求数据)

5、beforeUpdate
数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程。
该钩子在服务端渲染期间不被调用。

6、updated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务端渲染期间不被调用。

7、activated
keep-alive组件激活时调用
该钩子在服务器端渲染期间不被调用。
(如导航条可以滚动，那么可在该周期设置导航条位置)

8、deactivated
keep-alive组件停用时调用。
该钩子在服务端渲染期间不被调用。

9、beforeDestroy 
【类似于React生命周期的componentWillUnmount】
实例销毁之间调用。在这一步，实例仍然完全可用。
该钩子在服务端渲染期间不被调用。

10、destroyed
Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务端渲染不会被调用。

<router-view/>

// keep-alive缓存组件 有2个属性
// include="name"   缓存所有name=name的组件
// exclude="name"  除了name 其他都缓存
<keep-alive exclude='detail'>
    <router-view class='child-view'></router-view>
</keep-alive>

使用include/exclude 属性需要给所有vue类的name赋值
（注意不是给route的name赋值   不生效）
是组件里的name

移动web 性能优化
1. 要减少对DOM的操作
2. 尽量缓存可以缓存的数据
3. 尽量使用transform 动画代替DOM操作
4. 不要给非statice定位元素加css3动画，(如absolute、relative)，原因：会成倍增加性能开销
5. 适当使用硬件加速(使用canvas、或添加transform: translate3d(0,0,0)会触发硬件加速)
window.performance.timing

页面加载速度 的时间戳

props 里设置数组默认值时要这样

 props: {
      searches: {
        type: Array,
        default: () => []
      }
    },

Unable to preventDefault inside passive event listener due to target being treated as passive.

*            //css里加上这个 即可没有警告提示
  touch-action: none

vue data() {} 里定义的属性有get、set
reated() {} 里定义的属性只有get
新版vue-cli中使用dev-server代理的方法

在webpack.dev.config.js中
// 1.引包
const axios = require('axios');
const express = require('express');
const apiRoutes = express.Router();

// 2.配置
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({sourceMap: config.dev.cssSourceMap, usePostCSS: true})
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in      /config/index.js
devServer:{
//在这里添加一个before方法  上面的都是自带的
before(apiRoutes){
  apiRoutes.get('/api/getDiscList',(req,res)=>{
    const url = '这里是要链接的api地址';
    axios.get(url, {
      headers: {
        referer: '配置api地址referer',
        host: '配置api地址host'
      },
      params: req.query  //这是请求的query 
    }).then((response) => {
    //response是api地址返回的，数据在data里。
      res.json(response.data)
    }).catch((e) => {
      console.log(e);
    })
  });
  // app.use('/api', apiRoutes);
 }
}

this.$nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

在created()钩子函数执行DOM操作要放在nextTick()里，因为 created时DOM 其实并未进行任何渲染
在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。意思是在$nextTick里的操作，会等待vue根据数据变化更新完DOM后再执行.

使用rem自适应布局时，如果要操作DOM,和获取元素width、height，那么被操作的元素width、height属性必须是整数如3rem
获取dom元素相对于页面位置属性dom.

// 属性用x, y, right, left, bottom, top, width, height
dom.getBoundingClientRect()
// vue
this.$refs.元素.getBoundingClientRect()

// dom.offsetTop 相对于父元素的top值

获取触摸元素的位置属性e.touches[0]
自适应rem要放在app的created()里面页面才不会闪屏

created() {
 let html = document.getElementsByTagName('html')[0]
 setHTMLSize()
 window.onresize = () => setHTMLSize()
 function setHTMLSize () {
  let width = window.innerWidth || document.body.clientWidth
  if (width > 640) {
    width = 640
  }
  html.style.fontSize = width / 160 * 4.4 + `px`
 }
}

sass引入字体文件url不能换行

@font-face
  font-family: 'music-icon'
  src: url('../fonts/music-icon.eot?2qevqt')
  src: url('../fonts/music-icon.eot?2qevqt#iefix') format('embedded-opentype'),url('../fonts/music-icon.ttf?2qevqt') format('truetype'),url('../fonts/music-icon.woff?2qevqt') format('woff'),url('../fonts/music-icon.svg?2qevqt#music-icon') format('svg')

路由选中页面自动加.router-link-active
可以在根目录package.json安装的需要库

//添加库名: 版本 然后cnpm install安装
"dependencies": {
    "babel-runtime": "^6.0.0", // 转义ES6语法
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "fastclick": "^1.0.6",  // 点击无300ms延迟
    "jsonp": "^0.2.1"  // jsonp跨域
  },