vue中部分知识比较

一.v-if vs v-show

  v-if是”真实的“按条件渲染，因为它确保了在切换时，条件区块内的时间监听器和子组件都会被销毁与重建；

  v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

        相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

        总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

注意：当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。

二.组件化和模块化的区别

模块化：是从代码逻辑的角度进行划分的；方便代码分成开发，保证每个功能模块的职能单一；

组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用.

三.vue中created与mounted区别

        在created阶段，实例化已经被初始化，但是还没有挂载在el上，所以我们无法获取到对应的节点，但是此时我们是可以获取到vue中data与methods中的数据的；

        在mounted 阶段，Vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，可以调用节点。

//以下为测试vue部分生命函数，便于理解
beforeCreate(){  //创建前
    console.log('beforecreate:',document.getElementById('first'))//null
    console.log('data:',this.text);//undefined
    this.sayHello();//error:not a function
},
created(){  //创建后
    console.log('create:',document.getElementById('first'))//null
    console.log('data:',this.text);//this.text
    this.sayHello();//this.sayHello()
},
beforeMount(){ //挂载前
    console.log('beforeMount:',document.getElementById('first'))//null
    console.log('data:',this.text);//this.text
    this.sayHello();//this.sayHello()
},
mounted(){  //挂载后
    console.log('mounted:',document.getElementById('first'))//<p></p>
    console.log('data:',this.text);//this.text
    this.sayHello();//this.sayHello()
}

四.router和route的区别

        router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。

        route相当于当前正在跳转的路由对象，可以从里面获取name,path,params,query等。