WireServiceDemo.html

<template>
    <style>
        table tr td{
            padding: 10px;
            border: 1px solid black;
        }
    </style>
    <div style="background:white;padding:20px;">
        <table>
            <tr>
                <td>
                    <lightning-input type="text" label="Account ID"></lightning-input>
                </td>
                <td>
                    <lightning-button label="Get Details" onclick={fetchAccount}></lightning-button>
                </td>
            </tr>
            <tr>
                <td>Demo With Property</td>
                <td>
                    <c-wireservicewithproperty accid={accountid}></c-wireservicewithproperty>
                </td>
            </tr>
            <tr>
                <td>Demo With Function</td>  
                <td>
                    <c-wireservicewithfunction accid={accountid}></c-wireservicewithfunction>
                </td>
            </tr>
        </table>
    </div>
</template>

WireServiceDemo.js

import { LightningElement, track } from 'lwc';

export default class WireServiceDemo extends LightningElement {
    @track accountid;    
    
    fetchAccount(){ 
        this.accountid = this.template.querySelector('lightning-input').value;
    }

    renderedCallback(){
        console.log('Render Completed - Wire Service Demo');
    }
}

WireServiceDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="WireServiceDemo">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

wireservicewithfunction.html

<template>
    Account Name: {accountName}
</template>

wireservicewithfunction.js

import { LightningElement, track, wire, api } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

export default class WireServiceUsingFunction extends LightningElement {
    @track accountName;    
    @api accid;

    @wire(getRecord, { recordId: '$accid', fields: ['Account.Name'] })
    wiredAccount({ error, data }) {
        if (data) {
            this.accountName = data.fields.Name.value;
        }
    }

    renderedCallback(){
        console.log('Render Completed - Wire Service Using Function');
    }
}

wireservicewithproperty.html

<template>
    Website: {website}
</template>

wireservicewithproperty.js

import { LightningElement,wire,api } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';


export default class WireServiceUsingProperty extends LightningElement {
    @api accid;

    @wire(getRecord, { recordId: '$accid', fields: ['Account.Website'] })
    account;

    get website(){
        if( typeof this.account.data !== 'undefined' ){
            return this.account.data.fields.Website.value
        }
        return '';
    }

    renderedCallback(){
        console.log('Render Completed - Wire Service Using Property');
    }
}