Vue-学习笔记

ava_lian
586 阅读3分钟

1. export和export default的区别

  • 在一个文件或模块中，export、import可以有多个，export default仅有一个
  • export 对应的 import 需要知道 export抛出的变量名或函数名 import{a,b}
  • export default对应的 import 不需要知道 export抛出的变量名或函数名 import anyname
1.export
//a.js
export const str = "blablabla~";
export function log(sth) { 
  return sth;
}
对应的导入方式：

//b.js
import { str, log } from 'a'; //也可以分开写两次，导入的时候带花括号

2.export default
//a.js
const str = "blablabla~";
export default str;
对应的导入方式：

//b.js
import str from 'a'; //导入的时候没有花括号

使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名

//a.js
let sex = "boy";
export default sex  //（sex不能加大括号）
// b.js
本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。
所以可以为import的模块起任何变量名，且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12)   // boy,boy

2. keep-alive的用法

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

prop:

  • include: 字符串或正则表达式。只有匹配的组件会被缓存。
  • exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

结合router，缓存部分页面

使用$route.meta的keepAlive属性：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

需要在router中设置router的元信息meta：

//...router.js
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

(1) 在Page1页面输入框输入“asd”，然后手动跳转到Hello页面；

(2) 回到Page1页面发现之前输入的"asd"依然保留，说明页面信息成功保存在内存中；

动态需求

  • 首页是A页面
  • B页面跳转到A，A页面需要缓存
  • C页面跳转到A，A页面不需要被缓存

思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive：

A的路由：

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true // 需要被缓存
    }
}
export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
         // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // B 跳转到 A 时，让 A 缓存，即不刷新
        next();
    }
};
export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
        next();
    }
};

keep-alive生命周期钩子函数：activated、deactivated

使用会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

3. Vue.config的用法

Vue.config.productionTip = false 来关闭生产模式下给出的提示

在webpack.base.conf文件中配置别名以及扩展名

resolve: {
  extensions: ['.js', '.vue', '.json', '.styl'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
   'src': path.resolve(__dirname, '../src'),
   'common': path.resolve(__dirname, '../src/common'),
   'components': path.resolve(__dirname, '../src/components')
  }
 }

配置好别名和扩展名后，main.js就可以这样写

import Vue from 'vue';
import App from './App';
import Router from 'vue-router';
//components前面可以加上'@/'，也可以省略不写
//如果没有别名，就要写成“import goods from '../components/goods/goods';“
import goods from 'components/goods/goods';
import seller from 'components/seller/seller';
import ratings from 'components/ratings/ratings';
import '@/common/stylus/index';

4. babel-polyfill的作用

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

5. fastClick的用法

FastClick消除点击延时提高程序的运行效率

FastClick是一个非常方便的库，在移动浏览器上发生介于轻敲及点击之间的指令时，能够让你摆脱300毫秒的延迟。FastClick可以让你的应用程序更加灵敏迅捷。支持各种移动浏览器，比如Safari、Chrome、Opera等。

fastClick.attach(document.body)

6. Router中scrollBehavior的用法

当转到一个新的页面时，定位到最顶端

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  }...],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

7、vue中引入的模块

npm i name -D 写入devDependencies，是项目运行需要的一些工具

npm i name -S写入dependencies，是项目运行需要的依赖

  • fs 写入磁盘
  • memory-fs 写入内存
avatar
文章
阅读
粉丝