学习--vue数据流 nuxt.js做服务器端渲染

问 vue数据流

在vue react中 数据流是单向的，由父节点流向子节点，如果父节点的props发生了改变，那么react会递归遍历整个组件

父组件通过绑定props的方式，将数据传递给子组件，但是子组件自己并没有权利修改这些数据，如果要修改，只能把修改这一个行为通过event的方式报告给父组件，由父组件本身决定该如何处理数据。

vue的另一个概念是v-model 双向绑定

如何监听vuex里面的数据

vuex是为了解决组件间状态共享而出现的一个框架，其中有几个要素 是组成vuex的关键 state(状态) mutations actions

state表示需要共享的状态数据

mutation表示 更改state的方法集合 只能是同步更新 不能写ajax等异步请求

actions 如果需要做异步请求 可以在actions中发起 然后提交给mutations mutation再做同步更新

也就是state负责管理状态，mutation负责同步更新状态 action负责异步获取数据 同提交给mutation

所以组件监听vuex数据变化 就是监听 vuex中state的变化

第一种方案：我们可以在组件中通过组件的watch方法来做，因为组件可以将state数据映射到组件的计算属性上，然后监听映射的计算属性即可，代码如下：

//vuex中的state数据
state:{
    count:0

},

//A组件中映射state数据导计算属性

computed:{

    //this.$store.state.count
    ...mapState(['count']) //mapState 把全局count变成可以直接使用的数据

}

//A组件监听 count计算属性的变化
watch:{
    //watch可以监听data数据 也可以监听全局vuex数据
    count(){
        //用本身的数据进行一下计数
        this.changeCount++


    }


}

vue做服务端渲染

nuxt.js vue语法版本的 服务器端渲染（ssr）框架

为什么要做服务端渲染，首先要明白 服务端渲染解决什么问题

解析：vuejs官网说的很明白，要做服务端渲染首先必须是有对应的需求，实时到达时间（页面访问时间）的绝对需求，如果只是简单的一个管理系统，区区几百毫秒的优化，显得十分小题大做。

服务端渲染这里 有一个成熟优秀的框架 nuxt.js，正如next.js对于react ,nuxt是vue服务端渲染的优秀解决方案。nuxt的出现可以让渲染内容完全服务端化，解决seo不够友好，首屏渲染速度不够迅速的问题。

但是这里需要注意：并不是所有的页面都需要服务端渲染，因为服务端渲染比重多大 对于服务器的访问处理能力要求也会急剧增大。

步骤：这个nuxt脚手架不需要安装                nodejs默认自带

1 脚手架 npx create-nuxt-app（项目名）

2 yarn dev 启动开发

上线 yarn build yarn start

 

为什么使用nuxt.js？了解

普通vue项目 打开地址查看源代码 是空的 他主要是用切换的时候才会有内容 所有代码都在打包的js里面

nuxt.js项目 查看源代码 他是已经渲染好了很多html了

1、这个和seo 搜索引擎 比如百度 他会去找到所有网站 挨个看你的网站内容 有没有 好不好 --爬虫

如果普通vue项目是空的 那么就没有内容 seo不行 网站就很垃圾

如果nuxt.js项目 有内容 就比较好，利于seo

2、普通vue项目 内容打包到js了 那个js会很大 首页就显示很慢

如果nuxt.js项目 只是一些js  其他的服务器端就渲染好了  稍微快

vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂在于id为app的DOM元素上，这样会存在两大问题。

1：由于资源请求量大，造成网站首屏加载缓慢，不利于用户体验。

2：由于页面内容通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，不利于SEO。

nuxt.js是一个基于vue.js的通用应用框架，预设了利用vue.js开发服务端渲染的应用所需要的各种配置。可以将html在服务端渲染，合成完整的html文件再输出到浏览器。

除此之外 ，nuxt与vue还有一些其他方面的区别。

1：路由

nuxt 按照pages文件夹的目录自动生成路由

vue需在src/router/index.js手动配置路由

2：入口页面

nuxt页面入口为layouts/default.vue

vue页面入口为src/App.vue

3.nuxt 类似router-view nuxt-link类似 router-link

1：webpack配置

nuxt内置webpack,允许根据服务端需求，在nuxt.config.js中的build属性自定义构建webpack的配置，覆盖默认配置

vue关于webpack的配置存放在build文件夹下

2：asyncData 里面发送ajax这个东西跟生命周期这些都是平级的

要理解asyncData方法执行时，其实是在服务端完成的，这个数据是在服务端渲染好了的。