vue总结二

1.父组件与子组件的通信

1.父组件给子组件传值
        1.把想要传递的属性写在子组件标签中
        2.在子组件内使用props来进行属性的接收
        3.在子组件模板内使用传递过来的属性

 2.子组件给父组件传值
        1.在子组件模板中定义一个发射事件 触发this.$emit();（参数可以有多个，1.自定义事件(和父组件事件处理程序绑定) 2.发送的数据，3.自定义的想要发送的数据）
        2.在子组件内绑定自定义事件，触发父组件的事件处理程序
        3.在父组件事件处理程序内接收数据

2.watch和computed的区别：

        computed能做的watch都能做。

        watch能写异步操作，computed不行。

        computed有缓存，当页面重新渲染但值没有变化时，或立即返回原来计算的值，而不必重新执行函数，watch没有缓存，当页面重新渲染但值没有变化时，会执行函数。

3.vue是单页面还是多页面

vue是单页面

  优点:

    1.良好的交互体验

      因为是局部渲染，每个部分是单独的模块。避免了不必要的跳转和重复渲染

    2.前后端分离 提高开发效率。架构清晰。

    3.减轻服务器的压力。

      服务器只需要提供数据，不需要管前端逻辑和页面渲染，提高了性能。

  缺点:

    1. 可能出现首屏加载时间过长的问题

      因首屏加载时间过长导致白屏，如何解决？  ->  https://zhuanlan.zhihu.com/p/96455668

        1) 使用loading动画

          白屏时显示转圈的动画，数据请求完毕时隐藏动画，显示页面。

        2) 可以利用骨架屏效果

          将最终需要显示的页面简化，编写出简化版的布局，数据请求完毕时隐藏骨架，显示页面。

        3) 可以使用nuxt服务端渲染技术，减少浏览器压力

    2. 对SEO并不友好    

      搜索引擎的爬虫的原理就是抓取的url，然后获取html源代码并解析。而对于vue来说，爬虫获取到的html是模型页面而不是最终数据的渲染页面。

      可以使用nuxt框架解决seo问题。

4.'&'与'&&'的区别

        按位与：a&b是把a和b都转换成二进制数然后再进行与的运算；逻辑与：a&&b就是当且仅当两个操作数均为true时，其结果才为true；只要有一个为零，a&&b就为零。

5.query传参和params传参区别

        1.query传参参数保存在url地址栏中，以查询字符串的形式拼接上去
        2.安全性来讲，params比较安全，query会显示在地址栏中，容易造成数据泄露
        3.刷新页面时，query中的数据不受影响，而params中的数据直接消失

     路由跳转并携带参数
        · 路径path跳转和query搭配使用
          this.$router.push({ path: '/a', query: { username: 'zhangsan' } })
        · 名字name跳转和params搭配使用
          this.$router.push({ name: 'comA', params: { age: 12 } })
      参数获取
        在跳转的目标组件中，只要能够访问到$route就能拿到跳转携带的参数
        例如：在目标组件的created(){
          console.log(this.$route.params)
          console.log(this.$route.query)
        }