交互与实例的生命周期

左手的ㄟ右手 2021-07-24 20:42 297阅读 0赞

# 交互与实例的生命周期 #

## 交互基本概念 ##

### 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)
        }
    )

1.  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（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。