交互与实例的生命周期

交互与实例的生命周期

交互基本概念

1. 交互的应用场景（什么时候用到前后端交互）

1. 从后端获取一些数据，将其进行展示或计算
2. 将用户在页面中提交的数据发送给后端

2. Vue请求数据交互

vue请求数据有Vue-resource、Axios、fetch三种方式。Vue-resource是Vue官方提供的插件，axios与fetch是第三方插件

1. Vue.js resource交互
   Vue自身不带处理HTTP请求 如果想使用HTTP请求必须要引入 vue-resource.js 库它可以通过XMLHttpRequest发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。
   Vue.js 交互借助于 $http 完成,下载：npm install --save vue-resource
   get 类型
   语法：

this.$http.get("http://localhost:3000/get",{params:{uname:"王大锤"}}).then(
    (ok)=>{
        console.log(ok);
    },
    (err)=>{
        console.log(err);
    }
)

post类型
语法：

this.$http.get("http://localhost:3000/post",{uname:"王大锤"},{emulateJSON:true}).then(
    (ok)=>{
        console.log(ok);
    },
    (err)=>{
        console.log(err)
    }
) 

2. Axios的使用
   Axios是第三方插件，不仅能在Vue里使用，还能再其他第三方库中使用例如react
   npm install --save axios
   Axios–get交互
   语法：

axios.get("http://localhost:3000/get?uname=王大锤&uage=23").then(
    (ok)=>{console.log(ok);},
    (err)=>{console.log(err);}
)

Axios–post交互
语法：

//post发送数据，后端收不到，所以要修改数据的发送方式
let param = new URLSearchParams();
param.append("uname", "王大锤");
axios.post("http://localhost:3000/post", param).then(
    (ok) => {
        console.log(ok);
    },
    (err) => {
        console.log(err);
    }
)

Axios–综合交互

axios(utl:'请求地址',method:'请求方式',data/params:{k:v}).then((ok)=>{})
使用get发送数据的时候 使用params：{key:val}发送数据
使用post发送数据需要使用 var param=new URLSearchParams();修改传参方法
使用param.append("uname","xixi")添加数据并且使用data发送数据

过滤器

1. 过滤器作用

1. 在不改变数据的情况下，输出前端需要的格式数据
2. 在2.0中已经废弃了过滤器，需要我们自定义过滤器来使用filter

2. 全局过滤器的定义方法

位置：创建实例之前

3. Vue.js 局部过滤器

只能在当前vue注册内容中使用
在vue实例中与el属性data属性同级定义

4. 过滤器的调用方法

{{ msg | sum }}

5. 注意事项

1. 定义全局过滤器，必须放在Vue实例化前面
2. 在没有冲突的前提下，过滤器可以串联

<div id="demodiv">
        <p>{{num|001}}</p>
</div>
<div id="first">{{num|one}}</div>
<div id="second">{{num|001}}</div>
<div id="third">{{num|001}}</div>

<script>
    Vue.filter("001", function (val) {
        return "￥" + val;
    })

    new Vue({
        el: "#demodiv",
        data: {
            num: 12
        },
        methods: {}
    })
    new Vue({
        el: "#first",
        data: {
            num: 89
        },
        methods: {},
        filters:{
            one(val){
                return val+"元"
            }
        }
    })
    new Vue({
        el: "#second",
        data: {
            num: 56
        },
        methods: {}
    })
    new Vue({
        el: "#third",
        data: {
            num: 25
        },
        methods: {}
    })
</script>

实例生命周期

1. 什么是实例的生命周期

实例在创建到销毁经过的一系列过程叫生命周期

2. 什么是生命周期钩子

在生命周期中被自动调用的函数叫做生命周期钩子

3. 生命周期钩子函数的用途

在生命周期中会自动调用一些函数，为我们提供执行自定义逻辑的机会

4. 钩子函数有哪些

1. beforeCreate（创建实例）、created（创建完成）、beforeMount（开始创建模板）、mounted（创建完成）、beforeUpdate（开始更新）、updated（更新完成）、beforeDestroy（开始销毁）、destroyed（销毁完成）
2. 钩子函数的书写位置在data与methods同级位置书写。

5. 实例的生命周期—扩展设置数据请求的钩子

1. created里面，如果涉及到需要页面加载完成之后的话就用 mounted。
2. 在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素
3. 而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点

<div id="demodiv">
    {{num}}
    <button @click="num++">点我增加</button>
    <button @click="fun()">点我销毁</button>
</div>  
<script>
    new Vue({
        el: "#demodiv",
        data: {
            num: 19
        },
        methods: {
            fun() {
                this.$destroy();
            }
        },
        beforeCreate() {
            console.log("beforeCreate");
        },
        created() {
            console.log("created")
        },

        beforeMount() {
            console.log("beforeMount");
        },
        mounted() {
            console.log("mounted")
        },
        beforeUpdate () {
            console.log("beforeUpdate")
        },
        updated () {
            console.log("updated");
        },
        beforeDestroy() {
            console.log("beforeDestroy");
        },
        destroyed() {
            console.log("destroy");   
        }

    })
</script>

6. 实例的生命周期—扩展常见问题答案

1. Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
2. 生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易完成指定逻辑。
3. 它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
4. 第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
5. DOM 渲染在 mounted 中就已经完成了。

7. 简单描述每个周期？

1. beforeCreate（创建前） 在数据观测和初始化事件还未开始
2. created（创建后） 完成数据观测，属性和方法的运算，初始化事件，实例中的el属性还没有显示出来
3. beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
4. mounted（载入后） 在el 被新创建的 vue.el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
5. beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
6. updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7. beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
8. destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

来源：https://blog.csdn.net/qq_39200185/article/details/100025112