vue常用技术总结

1、vue computed计算属性的应用场景，data，props都属于vue响应式数据，当发生变化时，就会重新渲染<template>，那么计算属性里的方法就会重新调用，因为computed里的方法，必有返回值。特点是对data，props里的数据加工处理，返回值往往也跟着改变，这样UI部分就真的更新了。
计算属性里的方法不能传参数，如果要传参数只能使用methods 里的方法
...mapState({
        disc: state => state.disc  }),
...mapGetters([
       'disc'
])
这两种值(mapState,mapGetters)的映射也要放到computed属性里。
**这两种值(mapActions,mapMutations)的映射也要放到methods方法里。

2、全局自定义组件的方法
先编写一个创建组件实例的方法如下：
import Vue from "vue";

// 创建一个新的根组件实例的方法，可以动态编译自身模板并挂载
function create (Component,props){
  // 创建一个Vue实例
  const instance = new Vue({
    render(h) {
      // 渲染函数：用于渲染指定模板为虚拟dom
      // <Component foo="bar" :el='el'>
      return h(Component,{props});
    }
  }).$mount(); // 执行挂载,若不指定选择器，则模板将被渲染为文档之外的元素

  // 必须使用原生dom api把它插入文档中
  // $el指的是渲染的Component中真实dom元素
  document.body.appendChild(instance.$el);

  // 获取enterComp实例，$children指的是当前Vue实例中包含的所有组件实例
  const enterComp = instance.$children[0];
  // 销毁实例的方法
  enterComp.remove = () => {
    instance.$destroy();
  }
  return enterComp;
};


// 暴露接口
export default create

然后提供一个具体的组件，比如小球运动的组件 BallAnim.vue，这个组件可以通过 props: ['el'],接收参数。
最后在适合的组件里调用create(),如下：
onAddCart(el) {
      // 自定义全局组件-小球动画
      const anim = create(BallAnim, {el});
      anim.start();
      anim.$on('transitionend', () => {
        anim.remove();
      })
    }
3、全局自定义组件的方法2
在main.js里引入
import KHeader from './components/Header.vue'
// 全局引入Header.vue
Vue.component('k-header', KHeader)
使用的时候，比如用在一个组件里，加入<k-header title="开课吧商城"></k-header>就可以了
    
4、父组件跟子组件的通信方法
父组件：<good-list :goods='goodslist'></good-list>
子组件：props:['goods'] 或者 props:{goods:{type:String,default:[]}}接收这个goodslist

5、子组件跟父组件的通信方法
子组件：this.$emit('event',props)
父组件：<good-list @event='handle'></good-list>

6、自己跟自己通信方法
发出事件订阅 this.$emit('event',props)
接受事件  this.$on('event', props => {
    
})

7、父组件的created先执行，然后执行子组件的created跟mounted，最后是执行父组件的mounted

8、vue-cli3 脚手架的安装
npm install -g @vue/cli

新建项目：
 vue create myproject
手动设置配置项，(Babel Router Vuex Linter/Formatter),然后设置falback,eslink width only,然后选择Lint on save.然后配置文件单独（In dedicated）不要写到packpage.json里,最后save this as(No)
启动项目：
npm run serve

9、element-ui的安装于配置
vue add element
不要选择full

 10、cube-ui的安装配置
vue add cube-ui
不要选择full,不使用rem不使用layout

11、用js写animation/transition(如果是animation还要依赖模块)动画的方法：
先npm install create-keyframe-animation --save
<transition name='normal' 
 @before-enter='beforeEnter'
 @enter='enter'
 @after-enter='afterEnter'
 @before-leave='beforeLeave'
 @leave='leave'
 @after-leave='afterLeave'>
   <div class='normal-player' v-show='fullScreen'>
   </div>
</transition>
当v-show由隐藏变显示会执行before-enter、enter、after-enter
当v-show由显示变隐藏会执行before-leave、leave、after-leave
具体看播放器项目player.vue
12、VUE项目配置环境
第一：根目录创建三个文件 .env.test .env.prod .env.dev 这三个文件是根据不同的模式自动载入项目中。
第二：package.josn中 添加
"test": "vue-cli-service build --mode test",
"dev": "vue-cli-service serve --mode dev",
"prod": "vue-cli-service build --mode prod"
当npm run dev时，就会把.env.dev载入项目，在main.js中process.env.VUE_APP_TITLE === 'dev'
13、vue-router的路由信息怎么获取呢？
一个路由条目：/login/:id?redirect=to.path
需要这样的匹配：/login/123?redirect=to.path
this.$router.push({
  path:'/login',
  query:{redirect:to.path},
  params:{id:123}
}) 路由跳转
this.$route.path  获取 /login
this.$route.query  获取查询参 {redirect:to.path}
this.$route.params 获取占位参{id:123}